Chat app with Ionic 3 & Firebase – Ep. 5 – Adding Friends

Hi Friends,

Hope you are all well. This is Part 5 of my chat app with Ionic 3 and firebase series. In this post we’ll see how to get all the users from firebase and show them to the user so that the can add his friends from the list. We’ll also show a searchbar using which he can quickly search through the list.

Let’s begin.

A screencast of this post


The code for this post – here.

The complete code for this series can be found here. (Please note that this is a work in progress).

I assume you already have the code till the 4th episode of this series.

Let’s start from where we left off..

Open up chats.html and add the below code.

Note that I am adding the button in the header. That’s right we are going to have a button on the top right corner in the chats page that will enable us to add friends.


Now open up chats.ts and add the below code.

Go ahead and create the buddies page now.

Now we are going to display the list of users registered in our application on the buddies page from which the user can add people to his friends list.

Open up buddies.ts and add the below code.

Two things to notice here. Why are we storing the response in two arrays ? Also we don’t have getallusers() function in our user Provider right..? Let’s go ahead and create that.

Open up user.ts and add the below code.

We are simply getting all the users from the users collection and returning an array.

Now open up buddies.html and add the below code.

We have written code for a searchbar and a list of users (which we get from user provider).

Also, note that we are using a sliding list which will enable us to give options to the user to add friends. (Refer screenshot at the end of the post).

Now let’s add code for the searchbar as well in buddies.ts. Open up buddies.ts file and add the below code.

Now, I believe you would have understood why I have stored the list in two different arrays. We need to refresh the filteredusers array whenever the searchbar is in focus. (When the user does some search and then tries to do another, then we need to ensure that he is able to see the whole list right..? )

Just try running the code now and if everything goes fine, you would see a screen as shown below.



Also try sliding the list item or the user to the left and you would see an add button as shown below.



So far, so good right. Now let’s write some code to add a friend. Wait.. Whoa the post has gone too long already. Alright. Let’s continue coding in our next part.


Hope this helped you guys. If you found this helpful, kindly consider becoming my patron on patreon by clicking here.

Thanks for reading guys. Peace.. :)

Liked it? Take a second to support admin on Patreon!
  • Sudip Lahiri

    Hi Mr. Raja ,I am a patron.May I get ur email id please.

    • Sure.. Please mail to

      • Sudip Lahiri

        i sent you a email..kindly take a look.

        • Sudip Lahiri

          Incredible tutorial.You are the one of the best ionic developer for me.
          Happy to be joined as patron.

  • adesinamark

    Thanks for this tutorial!. When are you planning to do the episode 6?

    • Soon bro.. There is some painting work going on at my house.. So, I am unable to concentrate on this..

  • Jeetu Choudhary

    Very good Tutorials.
    I have followed the tutorials and created an app. But in my app profile pic is not showing. Only placeholder images show. When I select an image then it just shows broken image sign. What am I doing wrong?

    • Maybe check your firebase storage and see if the image is actually being saved..?

      • Jeetu Choudhary

        Yes, Image is being saved in firebase, but it doesn’t appear in app.

        • Euclides Marques

          Did someone get the profile picture?

  • Kuldeep Μaurya

    Wonderful buddy!! Cant wait for the next episode.. This has helped me alot.
    Waiting for the next tutorial.. :)

  • Indranil paul

    raja bro… little change you code i think is good for app. Don’t mint. Thank you bro..

    getallusers() {
    var promise = new Promise((resolve, reject) => {
    this.firedata.orderByChild(‘uid’).once(‘value’, (snapshot) => {
    let userdata = snapshot.val();
    let temparr = [];
    for (var key in userdata) {
    if (key != firebase.auth().currentUser.uid) {// reduce 1 loop. and current user will not show in search list
    }).catch((err) => {
    return promise;

    • Generalzod

      Thank you for your code it really helpfull ,Have u noticed you can add a user more than once can you fix it pls if u can This my mail bro

      • Hicham shadow

        did you find a solution ?

        • Generalzod

          no have you?

          • Euclides Marques

            Not yet? Did someone get the profile picture?

    • Generalzod
  • Betty

    Hi raja ^^ ,your tutorials are the best ! very good job,can you help for something please ? when we add somebody,we can do it more than once ,can you solve it for me ? thaaaanks ^^

  • Blair C

    Hi, thank you for sharing this tutorial. I have a question about list all the users, how to you deal with the database part in firebase, because all of the registered user are stored in separate tab (not in the database), or do you manually add user to db first? following is the coding part to fetch, thank you!

    getAllContacts() {
    return firebase.database().ref(‘/users’).orderByChild(‘uid’).once(‘value’).then((snapshot) => {
    return snapshot.val();
    }).catch((error) => {

  • Edwin Sepanosian

    hi im follwoing your tutorials and for some reason every time i try to have access to the users on the add buddies page from the firebase it does not show anything.

  • Mudasir Bhutto

    Thanks for awesome tutorial series. There’s bit mistake in the URL, it says ‘ep-4’; but it’s ‘ep-5’. Although long time, maybe you wanna change it.