Angular + RxJS filter
November 21, 2018
This page will walk through Angular RxJS filter example. RxJS filter
filters values emitted by source Observable
. We need to pass a predicate to filter
as an argument and if predicate returns true, only when filter
will emit value. The values of source Observable
for which predicate returns false , will not be emitted by filter
. Angular 6 integrates RxJS 6 which has been shipped with pipeable operators that is used independent of Observable
. RxJS pipeable operators are used independent of Observable
within the pipe
method of Observable
. RxJS filter
is imported as following.
import { filter } from 'rxjs/operators';
filter
with examples step by step.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 7.0.0
2. Angular CLI 7.0.3
3. TypeScript 3.1.1
4. Node.js 10.3.0
5. NPM 6.1.0
6. RxJS 6.3.3
Using RxJS filter
RxJSfilter
is used to filter values emitted by source Observable
on the basis of given predicate. If the condition returns true, filter
will emit value obtained from source Observable
otherwise not. Find the some usability of RxJS filter
operator.
1. Filter value on the basis of given character.
this.stdNames$ = this.filterDemoService.getStdNames().pipe( filter(data => data.indexOf(",") > 0), map(res => res.split(",")) );
Observable
returned by getStdNames()
has no (",") character, then it will not pass source Observable
to map
operator.
2. Filter numbers on the basis of odd/even.
this.filterDemoService.getNumbers().pipe( tap(n => console.log(n)), filter(n => n % 2 === 0), map(n => n + 10), scan((sum, n) => sum + n) ) .subscribe(result => console.log(result));
this.countryName$ = this.filterDemoService.getCountry().pipe( filter(country => country.getCountryName() !== null), map(country => country.getCountryName()), catchError(err => { console.error(err); return of(""); }) );
Error Handling and RxJS filter
RxJS providesretry
and catchError
operators for error handling in Angular. We can use catchError
with filter
and if there is any error in filter
, it will be handled by catchError
. Find the sample example of filter
with error handling.
this.filterDemoService.getCountry().pipe( retry(2), filter(country => country.getCountryStates().length > 0), map(country => country.getCountryStates()), catchError(err => { console.error(err); return of([]); }) ) .subscribe(res => this.countryStates = res);
JavaScript Array filter vs RxJS filter
JavaScript Arrayfilter
works on element of JavaScript Array and RxJS filter
is the RxJS operator that works on element emitted by Observable
.
a. JavaScript Array
filter
filters the array by applying given predicate to each element of the array and the element for which predicate returns true, will remain in output array.
Suppose we have an array as following.
let numArray = [1, 2, 3, 4];
Find the sample example of JavaScript Array filter
.
numArray.filter(n => {
console.log(n);
return n % 2 === 0;
})
.forEach(el => console.log("Even Number: " +el));
1 2 3 4 Even Number: 2 Even Number: 4
filter
filters the values emitted by Observable
. Find the code to use RxJS filter
.
of(numArray).pipe( filter(dataArray => { console.log(dataArray); return dataArray.length > 0; }) ).subscribe(resArray => console.log(resArray.join(" | ")));
Array(4) [ 1, 2, 3, 4 ] 1 | 2 | 3 | 4
Complete Example
filter-demo.component.tsimport { Component, OnInit } from '@angular/core'; import { Observable, of } from 'rxjs'; import { map, tap, filter, scan, retry, catchError } from 'rxjs/operators'; import { FilterDemoService } from './filter-demo.service'; @Component({ selector: 'app-filter-demo', templateUrl: './filter-demo.component.html' }) export class FilterDemoComponent implements OnInit { stdNames$: Observable<string[]>; countryName$: Observable<string>; countryStates: string[]; constructor(private filterDemoService: FilterDemoService) { } ngOnInit() { this.getStdNames(); this.calcData(); this.getCountryName(); this.getCountryStates(); let numArray = [1, 2, 3, 4]; //Using JavaScript Array filter numArray.filter(n => { console.log(n); return n % 2 === 0; }) .forEach(el => console.log("Even Number: " +el)); //Using RxJS filter of(numArray).pipe( filter(dataArray => { console.log(dataArray); return dataArray.length > 0; }) ).subscribe(resArray => console.log(resArray.join(" | "))); } //Using filter and map getStdNames() { this.stdNames$ = this.filterDemoService.getStdNames().pipe( filter(data => data.indexOf(",") > 0), map(res => res.split(",")) ); } //Using tap, filter, map and scan calcData() { this.filterDemoService.getNumbers().pipe( tap(n => console.log(n)), filter(n => n % 2 === 0), map(n => n + 10), scan((sum, n) => sum + n) ) .subscribe(result => console.log(result)); } //Using filter, map and catchError getCountryName() { this.countryName$ = this.filterDemoService.getCountry().pipe( filter(country => country.getCountryName() !== null), map(country => country.getCountryName()), catchError(err => { console.error(err); return of(""); }) ); } //Using retry, map and catchError getCountryStates() { this.filterDemoService.getCountry().pipe( retry(2), filter(country => country.getCountryStates().length > 0), map(country => country.getCountryStates()), catchError(err => { console.error(err); return of([]); }) ) .subscribe(res => this.countryStates = res); } }
<b>Student Names</b> <ul> <li *ngFor="let name of stdNames$ | async" > {{name}} </li> </ul> <b>Country Name</b> <div *ngIf="countryName$ | async as myCountryName"> {{myCountryName}} </div> <b>Country States</b> <ul> <li *ngFor="let state of countryStates" > {{state}} </li> </ul>
import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { MyCountry } from './my-country'; @Injectable({ providedIn: 'root' }) export class FilterDemoService { getNumbers(): Observable<number> { return of(1, 2, 3, 4); //Synchronously emits 1, 2, 3, 4 and then completes } getStdNames(): Observable<string> { return of("Mahesh, Krishna, Ram"); } getCountry(): Observable<MyCountry> { return of(new MyCountry()); } }
export class MyCountry { getCountryName() { return "India"; } getCountryStates() { return ["UP", "MP", "Assam", "Kerla"]; } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-filter-demo></app-filter-demo> ` }) export class AppComponent { }
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { FilterDemoComponent } from './filter-demo.component'; import { FilterDemoService } from './filter-demo.service'; @NgModule({ imports: [ BrowserModule, HttpClientModule, FormsModule, ], declarations: [ AppComponent, FilterDemoComponent ], providers: [ ], bootstrap: [ AppComponent ] }) export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.

References
RxJS ObservableAngular: The RxJS library
Pipeable Operators