Angular 4 Forms --> Search Results from Input - html

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