Angular 8 Firebase AutoComplete Search example with AngularFire2 v4

Angular 8 Firebase AutoComplete Search example with AngularFire2 v4

In this tutorial, we’re gonna create a simple Angular 8 App that supports autocomplete search from Firebase Realtime Database using AngularFire2.

Related Posts:
How to integrate Firebase with Angular 8
Angular 8 Firebase CRUD operations with AngularFire2 v4
Angular 8 Firebase Pagination example with AngularFire2 v4
Angular 8 Firebase Filter Data example with AngularFire2 v4

I. Technology

– Angular 8
– AngularFire2 4.0

II. Overview

Assume that we have Firebase Database like this:

We will build an Angular 8 App that supports searching Customer by name:

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.


2. Build Angular 8 App that can add & display list of data items

(Or you can skip this if you just wanna know way to implement searching)
This tutorial bases on code from previous posts (that helps us add and display data).

You can find how to do this in the post:
Angular 8 Firebase CRUD operations with AngularFire2 v4

And more practice with Pagination:
Angular 8 Firebase Pagination example with AngularFire2 v4


We just need to add a Search Component.

3. Support Searching

3.1 Indexing

We usually need to sort data when our database grows larger. It can be done simply by telling Firebase use an index with .indexOn (Firebase Console – Database RULES tab):

3.2 Service with AngularFireDatabase

Basing on the code from previous post, we just add a function that returns a List of Items:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';

export class CustomerService {

  private dbPath: string = '/customers';

  constructor(private db: AngularFireDatabase) {}

  findCustomers(start, end): FirebaseListObservable {
    return this.db.list(this.dbPath, {
      query: {
        orderByChild: 'name',
        limitToFirst: 6,
        startAt: start,
        endAt: end

3.3 Component for searching

<h2>Find Customers By Name</h2>
<input type="text" (keyup)="search($event)" placeholder="enter name" class="input">

	<li *ngFor="let customer of customers">
		<h4>{{}} - Age: {{customer.age}} - Active:	{{}}</h4>

<hr />
<div *ngIf="customers?.length < 1">
	<p>Not found!</p>

search function will be called on every keyup event that sends current value of the input. This is used for updating startWith and endWith Firebase query pattern.

import {Component, OnInit} from '@angular/core';
import {CustomerService} from '../customer.service';
import { Subject } from 'rxjs/Subject'

  selector: 'app-search-customers',
  templateUrl: './search-customers.component.html',
  styleUrls: ['./search-customers.component.css']

export class SearchCustomersComponent implements OnInit {

  startWith = new Subject()
  endWith = new Subject()
  customers: any[]
  constructor(private customerService: CustomerService) {}

  ngOnInit() {
    this.customerService.findCustomers(this.startWith, this.endWith)
                        .subscribe(customers => this.customers = customers)
  search($event) {
      const queryText = $ + '\uf8ff')


endWith gets an added Private Usage Area [PUA] unicode character ‘\uf8ff‘. It is after most regular characters in Unicode, so the query matches all values that start with queryText.

III. Check Result


IV. Source Code


By grokonez | March 25, 2021.

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *