I'm still getting the hang of angularjs4 and I've been working with angular-cli. One thing I need to do is retrieve the value of an ngModel from an input tag in my component. How can I access the value that's been entered into the input field? Once I have this value, I want to create a filter for displaying searched data on my page. What's the best way to go about implementing this in angular4? Below are my app.component.html and app.component.ts files:
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 => {
const products = res.json();
console.log(products);
this.productsList = products;
console.log(this.productsList);
})
}
}
HTML
<div class="container" align="center">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Let's find your product....." (keyup)="onKey($event)">
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<br>
</div>
<br>
<div *ngIf="show">
<ul class="list-group">
<li class="list-group-item" *ngFor="let data of productsList">
<img src="{{data.images[0].src}}" alt="image" width="auto" height="200px">
<span>{{data.name}}</span>
<span>{{data.regular_price}}</span>
</li>
</ul>
</div>