title: How to pass form input into api query Angular
body: <p>How do I pass form input value to an api query. For example I am using the itunes api, the url constructs of:  </p>
  
  <pre><code>https://itunes.apple.com/search?term=searchQuery&amp;entity=album&amp;limit=10
  </code></pre>
  
  <p>Where the <code>searchQuery</code> is that is what needs to be populated, if I hard code the value of <code>public searchQuery = ''; it works</code>. But need it to work with the input value of the search.</p>
  
  <p>So my files are:</p>
  
  <p><strong>service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse } from '@angular/common/http';
  import { Observable, of, throwError } from 'rxjs';
  import { catchError, retry } from 'rxjs/operators';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class ApiService {
  
    api: string = 'https://itunes.apple.com/search?term=';
  
    constructor(
      private http: HttpClient,
    ) { }
  
    getAll(searchTerm): Observable&lt;any&gt; {
      return this.http.get(this.api + searchTerm + '&amp;entity=album&amp;limit=10')
      .pipe(
        catchError(this.handleError)
      );
    }
  
    private handleError(error: HttpErrorResponse) {
      if (error.error instanceof ErrorEvent) {
        console.log(error.error.message)
  
      } else {
        console.log(error.status)
      }
      return throwError(
        console.log('Something is wrong!'));
    };
  }
  </code></pre>
  
  <p><strong>Component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ApiService } from '../../../services/api.service';
  import { FormGroup, FormControl } from '@angular/forms';
  import { FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'app-content',
    templateUrl: './content.component.html',
    styleUrls: ['./content.component.scss']
  })
  export class ContentComponent {
  
    public data = [];
    public apiData: any;
    public searchQuery = '';
  
    constructor(private service: ApiService) { }
  
    getAll() {
      this.service.getAll(this.searchQuery).subscribe((results) =&gt; {
        console.log('Data is recieved - Result - ', results);
        this.data = results.results;
      })
    }
  
    ngOnInit() {
  
    }
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="jumbotron hero"&gt;
    &lt;div class="container"&gt;
      &lt;h1 class="display-4 text-center header mb-5"&gt;SEARCH&lt;/h1&gt;
      &lt;form&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-8"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="inputPassword2" class="sr-only"&gt;Search&lt;/label&gt;
              &lt;input type="text" class="form-control form-control-lg" id="searchQuey"
                placeholder="Search iTunes..." value="SearchQuery"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-4"&gt;
              &lt;button type="button" (click)="getAll()" class="btn btn-primary btn-block btn-lg"&gt;Get All&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container" &gt;
    &lt;table class="table"&gt;
      &lt;thead class="thead-light"&gt;
        &lt;tr&gt;
          &lt;th&gt;Artwork&lt;/th&gt;
          &lt;th&gt;Artist&lt;/th&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Genre&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr *ngFor="let user of data"&gt;
          &lt;td&gt;&lt;img src="{{user.artworkUrl60}}"&gt;&lt;/td&gt;
          &lt;td&gt;{{user.artistName}}&lt;/td&gt;
          &lt;td&gt;{{user.collectionName}}&lt;/td&gt;
          &lt;td&gt;{{user.primaryGenreName}}&lt;/td&gt;
          &lt;td&gt;{{user.collectionPrice}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>