Dynamic Filtering in Angular
We have a list of districts on the screen, and we want to filter them when user types some letters in a text input. Let’s see how to implement a data filter using RxJs operators and some Angular form features.
First we create the list of districts.
We modify the app.component.ts as below.
We import map and startwith from rxjs operators. The Map operator applies a function of your choosing to each item emitted by the source Observable, and returns an Observable that emits the results of these function applications. The StartWith operator accepts a variable number of function parameters and treats each one as an item that it will prepend to the resulting Observable sequence in the order they are given in the parameter list.
And below is the app.component.html
The ouput will be as below.
