title: Angular 4 Forms --> Search Results from Input
body: <p>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.</p>
  
  <p>Here is some code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- Search Form --&gt;
  &lt;form class="" action="index.html" method="post"&gt;
  
    &lt;h1&gt; Let's Go. &lt;/h1&gt;
    &lt;hr&gt;
  
    &lt;select class="" name=""&gt;
      &lt;option value=""&gt;Select means of Travel&lt;/option&gt;
      &lt;option value=""&gt;Flight&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;label for="Travel Start Date"&gt;Travel Start Date&lt;/label&gt;
    &lt;input type="date" name="" value="Travel Start Date"&gt;
  
    &lt;label for="Travel End Date"&gt;Travel End Date&lt;/label&gt;
    &lt;input type="date" name="" value="Travel End Date"&gt;
  
    &lt;select class="" name=""&gt;
      &lt;option value=""&gt;Departure Location&lt;/option&gt;
      &lt;option value="Atlanta"&gt;Atlanta&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select class="" name=""&gt;
      &lt;option value=""&gt;Arrival Location&lt;/option&gt;
      &lt;option value="San Francisco"&gt;San Francisco&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;select class="" name=""&gt;
      &lt;option value=""&gt;Product Class&lt;/option&gt;
      &lt;option value=""&gt;Economy&lt;/option&gt;
    &lt;/select&gt;
  
    &lt;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=""&gt;
  
  &lt;/form&gt;
  
  &lt;!-- Results --&gt;
  
  &lt;div class="result"&gt;
    &lt;ul&gt;
      &lt;li *ngFor = 'let group of displayItems'&gt;
        &lt;div class="flight-card"&gt;
  
          &lt;div class="availability"&gt;
            &lt;h5&gt; Availability: {{group.availability}} &lt;/h5&gt;
          &lt;/div&gt;
  
          &lt;div class="price"&gt;
            {{ group.price.symbol }}
            {{ group.price.amount }}
            &lt;p&gt;{{ group.price.currency }}&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="arrival"&gt;
            &lt;h5&gt; Arrival City: &lt;/h5&gt;{{group.arrival.city}} &lt;br&gt;
            &lt;h5&gt; Arrival Airport Name: &lt;/h5&gt;{{group.arrival.airport.name}} &lt;br&gt;
            &lt;h5&gt; Arrival Time: &lt;/h5&gt;{{group.arrival.city}} &lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
  
          &lt;hr&gt;
  
          &lt;div class="depature"&gt;
            &lt;h5&gt; Depature City: &lt;/h5&gt;{{group.departure.city}} &lt;br&gt;
            &lt;h5&gt; Departure Airport Name: &lt;/h5&gt;{{group.departure.airport.name}} &lt;br&gt;
            &lt;h5&gt; Departure Time: &lt;/h5&gt;{{group.departure.time}} &lt;br&gt;&lt;br&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(In root App)
  Component.Ts</p>
  
  <pre><code>    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) =&gt; {
        // Parses the response to JSON.
        this.result = res.json();
        this.displayItems = this.result['results'];
        console.log(this.result);
      }, error =&gt; {
          console.log(error)
          this.errorFromSubscribe = error;
        });
  
  
   }
  
    title = 'app';
  }
  </code></pre>