Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

May 27, 2016

Angular 2: Filtering a List Using a Computed Property and Setter

Filed under: Angular @ 12:34 pm
Tags: ,

In my Pluralsight course: “Angular 2: Getting Started”, I demonstrate how to filter a list using a custom pipe. However, using a custom pipe does not provide easy access to the filtered result. For example, say you also want the count of the filtered list so you can display “5 of 125” or access other information about the list. In these cases, it is best to filter without using a custom pipe. This post shows you one technique: using a computed property and a setter.

Additional techniques for solving this problem are:

This post updates the code available from my github repo. So starting with that code:

1. Change the declarations making the listFilter a private property and adding a productsFiltered computed property. The productsFiltered property will contain the filtered list of products.

pageTitle: string = ‘Product List’;
imageWidth: number = 50;
imageMargin: number = 2;
showImage: boolean = false;
private _listFilter: string;
errorMessage: string;
products: IProduct[];
productsFiltered: IProduct[];

2. Add a property getter and setter for the listFilter property as follows:

get listFilter(): string {
    return this._listFilter;
}

set listFilter(filter: string) {

    this._listFilter = filter;
    filter = filter ? filter.toLocaleLowerCase() : null;
    this.productsFiltered = filter ? this.products.filter((product: IProduct) =>
        product.productName.toLocaleLowerCase().indexOf(filter) !== -1) : this.products;
}

The getter returns the private variable and is used by the template bindings to display the entered filter string. The setter sets the private variable and re-filters the list every time the listFilter property changes.

This is not enough, however. When the page is first displayed the product array is empty. So this code returns an empty collection and nothing appears on the page. We need something to reset this filter when the product data is retrieved.

3. One way to set the listFilter when the data is retrieved is to modify the ngOnInit() method as follows:

ngOnInit(): void {
       this._productService.getProducts()
                 .subscribe(
                   products => this.onProductsRetrieved(products),
                   error =>  this.errorMessage = <any>error);
}

When the products are retrieved, this code calls the onProductsRetrieved method.

4. Create the new onProductsRetrieved method as follows:

onProductsRetrieved(products: IProduct[]) {
    this.products = products;
    this.listFilter = ”;
}

This code sets the retrieved products to our product property and then sets listFilter to an empty string so that our set procedure is executed and our data is displayed.

5. The only other change is to the template:

<tr *ngFor=’let product of productsFiltered‘>

This binds to the productsFiltered property and no longer needs the pipe. We can then also bind other elements to this property or this property’s count method as needed.

Enjoy!

No Comments

Trackbacks/Pingbacks

  1. Angular 2: Filtering a List Using a Computed Property and Events -Deborah's Developer MindScape
  2. Angular 2: Filtering a List Using a Computed Property and ngModelChanged -Deborah's Developer MindScape

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs