Hi Friends,
Hope you are all well. This is one of the most requested posts on this site. In this post let’s see how to build a simple instant search functionality by querying firestore with the help of rxjs.
Let’s begin.
A screencast of this post:
The code for this post is available here.
First let’s scaffold out an angular app using the cli. Install firebase and angularfire2 using the below command.
|
1 |
npm install firebase angularfire2 --save |
Now open up environments directory and in the environment.ts file add the firebase config code. Your environment.ts file should look like below.
|
1 2 3 4 5 6 7 8 9 10 11 |
export const environment = { production: false, firebase: { apiKey: <apiKey>, authDomain: <yourauthDomain>, databaseURL: <yourdatabaseURL>, projectId: <yourprojectId>, storageBucket: <yourstoragebucket>, messagingSenderId: <yoursenderIdhere> } }; |
Now open up app.module.ts file and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { environment } from '../environments/environment'; //AngularFireStuff import { AngularFireModule} from 'angularfire2'; import { AngularFirestore, AngularFirestoreModule} from 'angularfire2/firestore'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule.enablePersistence() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
It’s pretty much easy to understand, I have just added imports to whatever I installed (firebase and angularfire2).
Now that it’s done, let’s go ahead and build the instant search itself.
I will just make a text field. When the user inputs some text in this field, he/she will be shown a list of results (queried from firestore). Instant Search duh !
Now open up app.component.html and add the below code.
|
1 2 3 4 5 6 7 8 |
<input type="text" [(ngModel)]="searchterm" (keydown)="search($event)"> <ul *ngFor="let club of clubs"> <li>{{club.club}}</li> <li>{{club.country}}</li> </ul> <div *ngIf="clubs?.length < 1"> <p>Sorry, no clubs found</p> </div> |
Before proceeding any further, I have created a simple collection with five documents as shown below.
Now open up app.component.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { Component, OnInit } from '@angular/core'; import { AngularFirestore } from 'angularfire2/firestore'; import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/Rx'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { searchterm: string; startAt = new Subject(); endAt = new Subject(); clubs; allclubs; startobs = this.startAt.asObservable(); endobs = this.endAt.asObservable(); constructor(private afs: AngularFirestore) { } ngOnInit() { this.getallclubs().subscribe((clubs) => { this.allclubs = clubs; }) Observable.combineLatest(this.startobs, this.endobs).subscribe((value) => { this.firequery(value[0], value[1]).subscribe((clubs) => { this.clubs = clubs; }) }) } search($event) { let q = $event.target.value; if (q != '') { this.startAt.next(q); this.endAt.next(q + "\uf8ff"); } else { this.clubs = this.allclubs; } } firequery(start, end) { return this.afs.collection('epl', ref => ref.limit(4).orderBy('club').startAt(start).endAt(end)).valueChanges(); } getallclubs() { return this.afs.collection('epl', ref => ref.orderBy('club')).valueChanges(); } } |
Whoa ! that’s a lot of code..
Let’s break it down.
On Initialization, I am simply getting all the clubs (To display when the app loads).
I have created a couple of RxJS subjects through which I can pass the typed values as a stream continuously. I have also created a couple of observables using which I am passing the values to firequery() function.
Note that I am simply writing the querying function here as well, whereas in your apps this would probably written inside a service.
Also another thing to notice is that the startAt() and endAt() parameters in the query are the ones which help us to retrieve the documents starting with our specified string pattern. These two parameters must hold values that are of the same type of the orderBy() argument.
For eg., in this case I have ordered by club which means that the startAt() and endAt() should contain arguments of string type and not numbers or any other custom data types.
Now as you see in the html file, I am simply iterating through the results and displaying them on the front-end. Angular’s 2-way data binding itself helps us in this case, making it look instant on the screen.
That’s it. Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Donate to keep this site alive – click here
Thanks for reading. Peace.. 
