Angular 4 Forms --> Search Results from Input

Question

So I am having a bit of a problem. I have to create a search page for a travel agency. In this example, I'm booking a flight. I have no idea how to display each result based off the inputs of the form ahhhhh. I've been trying but I ran outta mental energy for the day smh.

Here is some code:

HTML

<!-- Search Form -->
<form class="" action="index.html" method="post">

  <h1> Let's Go. </h1>
  <hr>

  <select class="" name="">
    <option value="">Select means of Travel</option>
    <option value="">Flight</option>
  </select>

  <label for="Travel Start Date">Travel Start Date</label>
  <input type="date" name="" value="Travel Start Date">

  <label for="Travel End Date">Travel End Date</label>
  <input type="date" name="" value="Travel End Date">

  <select class="" name="">
    <option value="">Departure Location</option>
    <option value="Atlanta">Atlanta</option>
  </select>

  <select class="" name="">
    <option value="">Arrival Location</option>
    <option value="San Francisco">San Francisco</option>
  </select>

  <select class="" name="">
    <option value="">Product Class</option>
    <option value="">Economy</option>
  </select>

  <input style="width: 100px; background-color: green; color: #eef; height: 40px; border-radius: 50px; margin: 0 auto; margin-top: 50px;"
         type="submit" name="" value="Submit" onclick="">

</form>

<!-- Results -->

<div class="result">
  <ul>
    <li *ngFor = 'let group of displayItems'>
      <div class="flight-card">

        <div class="availability">
          <h5> Availability: {{group.availability}} </h5>
        </div>

        <div class="price">
          {{ group.price.symbol }}
          {{ group.price.amount }}
          <p>{{ group.price.currency }}</p>
        </div>

        <div class="arrival">
          <h5> Arrival City: </h5>{{group.arrival.city}} <br>
          <h5> Arrival Airport Name: </h5>{{group.arrival.airport.name}} <br>
          <h5> Arrival Time: </h5>{{group.arrival.city}} <br><br>
        </div>

        <hr>

        <div class="depature">
          <h5> Depature City: </h5>{{group.departure.city}} <br>
          <h5> Departure Airport Name: </h5>{{group.departure.airport.name}} <br>
          <h5> Departure Time: </h5>{{group.departure.time}} <br><br>
        </div>

      </div>
    </li>
  </ul>
</div>

(In root App) Component.Ts

    import { Component } from '@angular/core';
import { Http, Response, RequestMethod, RequestOptions, Headers } from '@angular/http';
import { NgIf } from '@angular/common';
import { Form } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  result;
  errorFromSubscribe;
  errorFromCatch;
  displayItems;



  // Inject HttpClient into your component or service.
 constructor(private http: Http) {}

 ngOnInit(): void {
   // Making the HTTP Request
   this.http
    // Get API data
    .get('https://api.myjson.com/bins/1gb9tf')
    // Subscribe
    .subscribe( (res: Response) => {
      // Parses the response to JSON.
      this.result = res.json();
      this.displayItems = this.result['results'];
      console.log(this.result);
    }, error => {
        console.log(error)
        this.errorFromSubscribe = error;
      });


 }

  title = 'app';
}

Answer 1

You need to use pipe for filtering by applying a specific logic to filter items for search

  <li *ngFor="let group of displayItems  | filter: term">

and the pipe as follows,

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
 transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(item) {
      for(let property in item){

        if (item[property] === null){
          continue;
        }
        if(item[property].toString().toLowerCase().includes(term.toLowerCase())){
          return true;
        }

       }
      return false;
    });
  }

}

DEMO