Filter In Angular 4

Introduction

Filter is an important part in AngularJS as well as Angular 2 or Angular 4. It is basically used to filter an item from a group of items, which are there in an array or an object array. It selects a subset of the items from an array and returns it as a new array and this item is displayed on UI.

 

@angular/core of Angular 4 or 2 module library provides two moduels - Piple and PipeTransform for the filtering feature.

import { Pipe, PipeTransform } from '@angular/core';

Filter Code

Now, I will explain step by step by creating one filter.

 

Create one file MyFilterPiple.ts inside Filter folder and write the code, as shown below.

import { Pipe, PipeTransform } from '@angular/core';
import { Birds } from '../models/birds';

@Pipe({
    name: 'myfilter',
    pure: false
})

export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Birds): any {
        if (!items || !filter) {
            return items;
        }
        return items.filter(item => item.name.indexOf(filter.name) !== -1);
    }
}

Here, Filter name is myfilter and logic of filtering is written inside MyFilterPiple class.

{ Birds } is a model class, which contains the properties given below.

export class Birds {
    id: number;
    name: string;
}

Now, import MyFilterPiple class inside your app.module.ts class, as shown below.

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {MyFilterPipe} from './filter/MyFilterPipe';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule
  ],
  declarations: [
    AppComponent,
    MyFilterPipe
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

Now, it's time to use Filter inside the component, as shown below.

import { Component } from '@angular/core';
import {Birds} from '../models/birds';

@Component({
  template: `
    <h2>Birds</h2>
    <p>List of Birds</p>
    <div>
      <ul>
       <li *ngFor="let bird of birds | myfilter:filterargs">
         {{bird.id}} {{bird.name}}
       </li>
      </ul>
    </div>
    `
})

export class BirdListComponent {
  filterargs = {name: 'Eagle'};
  birds: Birds[] = [
  {id: 11, name: 'Crow'},
  {id: 12, name: 'Peacock'},
  {id: 13, name: 'Sparrow'},
  {id: 14, name: 'Cuckoo'},
  {id: 15, name: 'Eagle'},
  {id: 16, name: 'Swan'},
  {id: 17, name: 'Duck'},
  {id: 18, name: 'Hen'},
  {id: 19, name: 'Parrot'},
  {id: 20, name: 'Woodpecker'}
  ]
}

Inside *ngFor, you need to put the name of the filter and the filter arguments i.e. the value, which you want to filter. Here, filtering the value is hardcoded. It should be dynamic and come via textbox. For basic understanding, I hardcoded it, as shown below.

filterargs = {name: 'Eagle'};

Complete filter line inside *ngFor, as shown below.

<li *ngFor="let bird of birds | myfilter:filterargs">

Hence, it will filter and give the subset of the bird name Eagle, which is displayed on UI.

 

Download and run the complete attached code. It is node.js, which must be installed into your PC.

Execute the project, as shown below.

Go to root folder "routingpractice"  ~~ Open the command prompt ~~ type "npm start" ~~ it will automatically load on the Browser.

Conclusion

Filter in Angular is a very powerful concept. It filters the value from an array or an object array and displays on UI. Angular 4 filter is very good and far better than AngularJS filter when it comes to performance.