Instant Search Tab in Angular

In this blog post, we will learn to do Instant search in Angular using the data from Cloud Firestore. So let us first assume what we actually want to have as the results on the browser.

We want to create a search tab on the browser, which has a placeholder saying “Search by name”. As we type a character, we want our application to give us suggestions based on the data that is stored on our Firestore. It should look something like this:

https://thepracticaldev.s3.amazonaws.com/i/o685nd7twhmhbwneeph7.PNG

To do that, let us assume we have some data inside our Firestore database. To learn how to add data in the Firestore database, refer to my article Firestore with Angular. Our data in Firestore looks like this:

https://thepracticaldev.s3.amazonaws.com/i/djqgru65trypdvd7f65u.png

We have created four documents with the details of different personalities, each containing the name and profession of that personality.

Our task now is to create a search tab on the browser. Let us do that.

https://gist.github.com/NishuGoel/0f1a3f81d01f3c65a50d382cc9ee1654

In this code, we have done two-way data binding for the property searchterm defined in the component as a string. Also, to record the recently typed value somewhere, we take a variable inside the component.

https://gist.github.com/NishuGoel/103b0381ea736d6e54299c93925a5e8e

Our next step is to prepare the search box to give suggestions on the basis of the characters that we are typing. To do that, let us add a list which will display those suggestions. Now, the most important part of the process is to add two subjects from the RxJS library namely startAt and endAt.

startAt = new Subject();
endAt = new Subject();
Also, we will take two observables to use the subjects as observables.

startObs = this.startAt.asObservable();
endObs = this.endAt.asObservable();
Now, since this functionality works on calling the method search(), so inside it, we mention,

search($event){
this.startAt.next(q);
this.endAt.next(q + “\uf8ff”);
}
I understand you might be wondering where this strange looking character comes from! I had the same reaction.

https://thepracticaldev.s3.amazonaws.com/i/ntbk388a6na9sz6fhs03.jpeg

Learn more on this here: Pattern matching

Now, subscribe the value of the observables inside the lifecycle hook ngOnInit().

ngOnInit(){
Observable.combineLatest(this.startObs, this.endObs).subscribe((value) => {
this.firequery(value[0], value[1]).subscribe((names) => {this.names = names;
})
})
}
Till this point, this is how our component looks:

https://gist.github.com/NishuGoel/48a0ca4e3a098cc63afa2e334b3c34ae

Let us update our template now to put the results on the browser.

https://gist.github.com/NishuGoel/e6d30527ff240e2ea03ff547da0b7e62

Using this list now, we are displaying the data using interpolation and putting a structural directive *ngIf for if the character length is less than 1, it displays the given statement.

Let us finally look if we have gotten the desired results now.

Run ng serve anddd….

https://thepracticaldev.s3.amazonaws.com/i/vftfzce9bk5bohl2sal8.png

https://thepracticaldev.s3.amazonaws.com/i/qhcgi9m8sb38dwiwzjle.png

Here is the output and this is definitely an improved version of what we had desired. Awesome! So this was about creating an Instant Search Tab in Angular by retrieving data from Firestore.