Angular 4 Firebase AutoComplete Search example with AngularFire2 v4

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

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

I. Technology

– Angular 4
– AngularFire2 4.0

II. Overview

Assume that we have Firebase Database like this:

We will build an Angular 4 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 4 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 4 Firebase CRUD operations with AngularFire2 v4

And more practice with Pagination:
Angular 4 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:

3.3 Component for searching

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.

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 JavaSampleApproach | September 5, 2017.

Related Posts

7 thoughts on “Angular 4 Firebase AutoComplete Search example with AngularFire2 v4”

  1. Thank you for the great post.

    I have as follow:

    However it seems that there is always one character delay in displaying the results.

    For example, when I type “M”, then it doesn’t do anything. Only after I press another character “Y” or spacebar, then it displays the results for “M”.

    How would I make it so that it displays as soon as the first character is inputted?

    Any help will be much appreciated.

    Thank you.

    1. Hi Steve,

      I have checked code with timestamp, it also works well.
      Right after typing the first key, it shows relevant customers for the key.



      1. Thank you for this! I’ve noticed that no results are shown unless I have pressed a key. I’ve tried using (keyup)/(keydown) but neither show the default list until a key is pressed. Happen to know a work-around? I feel like it’s dead simple, but Im unable to find anything on Google. Thanks again!

  2. Hi! Thanks so much for the tutorial.

    I was wondering if you could recommend a way to filter out unique items? For example, if I search for Jack and have two or more items that are exactly the same (say “Jack – Age: 27 – Active: true”), is there a way to only show one in the search result?

    Any help would be greatly appreciated, thank you!

  3. Hey there i get an error as on ngOnInit() the query startAt and endAt expects a value like string not Subject. So when reaching to the the service the getCustommers doesn’t understand parameters Subject since it’s expecting a value

Got Something To Say:

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