How do I filter an array with TypeScript in Angular 2?
You need to put your code into ngOnInit
and use the this
keyword:
ngOnInit() { this.booksByStoreID = this.books.filter( book => book.store_id === this.store.id);}
You need ngOnInit
because the input store
wouldn't be set into the constructor:
ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.
(https://angular.io/docs/ts/latest/api/core/index/OnInit-interface.html)
In your code, the books filtering is directly defined into the class content...
You can check an example in Plunker over here plunker example filters
filter() { let storeId = 1; this.bookFilteredList = this.bookList .filter((book: Book) => book.storeId === storeId); this.bookList = this.bookFilteredList; }
To filter an array irrespective of the property type (i.e. for all property types), we can create a custom filter pipe
import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: "filter" })export class ManualFilterPipe implements PipeTransform { transform(itemList: any, searchKeyword: string) { if (!itemList) return []; if (!searchKeyword) return itemList; let filteredList = []; if (itemList.length > 0) { searchKeyword = searchKeyword.toLowerCase(); itemList.forEach(item => { //Object.values(item) => gives the list of all the property values of the 'item' object let propValueList = Object.values(item); for(let i=0;i<propValueList.length;i++) { if (propValueList[i]) { if (propValueList[i].toString().toLowerCase().indexOf(searchKeyword) > -1) { filteredList.push(item); break; } } } }); } return filteredList; }}//Usage//<tr *ngFor="let company of companyList | filter: searchKeyword"></tr>
Don't forget to import the pipe in the app module
We might need to customize the logic to filer with dates.