How can I create a custom @Pipe to filter data in a table using an input tag?
<tr *ngFor='let list of lists'>
<td><input type="" name="" value=""></td>
<td>{{ list.name }}</td>
<td>{{ list.location }}</td>
<td>{{ list.type_id }}</td>
<tr>
I retrieve the data from an API using HTTP service:
getServices(): Observable<any> {
return this._http.get(this._url)
.map(res => res.json());
}
UPDATE:
Here is my service component:
import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map'
@Injectable()
export class TableComponentService{
private _url = 'http://101.496.222.511:8080/api/v1/10';
constructor(private _http: Http) {
}
names:string[];
getServices(): Observable<any> {
return this._http.get(this._url)
.map(res => res.json());
}
}
And here is the table component:
import { Component, OnInit } from '@angular/core';
import { TableComponentService } from './table.service';
@Component({
selector: 'tablecomponent',
templateUrl: 'app/table.template.html',
providers: [TableComponentService]
})
export class TableComponent implements OnInit {
lists: any[];
constructor(private _service: TableComponentService) {
}
ngOnInit() {
this._service.getServices()
.subscribe(lists => this.lists = lists)
}
}