How do I filter an array with TypeScript in Angular 2? How do I filter an array with TypeScript in Angular 2? arrays arrays

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.