title: How to get ngModel value of input tag into a component in angularjs4?
body: <p>I am new to angularjs4. I am working on angular-cli.Here I need to get the value of a ngModel value of input tag in my component.How can I get that value entered in input field?By using that value I need to write a filter for displaying searched data on my page.How can I Implement this one in angular4?.
  Here is my app.component.html and app.component.ts files:</p>
  
  <pre><code>import {
      Component
  } from '@angular/core';
  import {
      Http,
      Response,
      Headers,
      RequestOptions
  } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      productsList = '';
      show: boolean;
      hide: boolean;
      listBtn: boolean;
      gridBtn: boolean;
      values = '';
  
      onKey(event: any) { // without type info
          this.values += event.target.value;
          console.log("value " + this.values);
      }
      listView() {
          this.gridBtn = true;
          this.show = true;
          this.hide = false;
          this.listBtn = false;
      }
      gridView() {
          this.listBtn = true;
          this.gridBtn = false;
          this.show = false;
          this.hide = true;
  
      }
      constructor(private http: Http) {
          this.show = false;
          this.hide = true;
          this.show = false;
          this.listBtn = true;
          this.gridBtn = false;
          this.getData();
      }
      createAuthorizationHeader(headers: Headers) {
          headers.append('Authorization', 'Basic ' +
              btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901'));
          headers.append("Content-Type", "application/x-www-form-urlencoded");
      }
      getData() {
          console.log('hellooo');
          let headers = new Headers();
          this.createAuthorizationHeader(headers);
          return this.http.get(' https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products', {
              headers: headers
          })
              .subscribe(res =&gt; {
                  const products = res.json();
                  console.log(products);
                  this.productsList = products;
                  console.log(this.productsList);
              })
  
  
      }
  
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container" align="center"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-6 col-sm-offset-3"&gt;
              &lt;div class="input-group stylish-input-group"&gt;
                  &lt;input type="text" class="form-control" placeholder="Let's find your product....." (keyup)="onKey($event)"&gt;
                  &lt;span class="input-group-addon"&gt;
                      &lt;button type="submit"&gt;
                          &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;br&gt;
  &lt;/div&gt;
  
  
  &lt;br&gt;
  &lt;div *ngIf="show"&gt;
      &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item" *ngFor="let data of productsList"&gt;
              &lt;img src="{{data.images[0].src}}" alt="image" width="auto" height="200px"&gt;
              &lt;span&gt;{{data.name}}&lt;/span&gt;
              &lt;span&gt;{{data.regular_price}}&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>