Chat app with Ionic 3 & Firebase – Ep. 13 – Adding members to groups.

Hi Friends,

Hope you are all well. In this post we’ll see how to add members to the groups that you create.

I presume you have already read the previous posts in this series and you also have a repo of the code with you.

Let’s begin.

A screencast of this post.


The code for this post is available –  here

The complete code for this series is available – here (Would highly appreciate it if you could leave a star to this repo on github)

Open groupbuddies.ts that we have created previously and add the code shown below.

Let’s break this down.

  1. We are getting the list of all friends from the backend when the user enters the group.
  2. Next, this list is compared with the current group members and then filtered. This is to not show the people in the friend list who are already members of the group.
  3. The user can slide the list of names to the list to add him/her to the group.
  4. As a bonus feature we have a search-bar that provides a real-time search effect.

Open up groupbuddies.html and add the below code.

If everything goes well, you would see a screen as shown below.


And when you slide the name to the left you would be able to add the friend to the group that you created.


Pretty cool right..?

Now let’s write some code to actually add the friend to the db.

Open up groups.ts (in providers/groups.ts)

The getgroupimage() function is to get the group image and the addmember() adds the member in such a way that now the member has an instance of the group under his uid as well.

The structure as of now.


I think by now you would start to get a clearer picture of what’s happening here.

When the member opens his groups tab he would notice that he is part of the group as well.

In our next episode, we’ll see how to remove members from a group, delete the group and also view info about the group.

Hope this helped you guys. If you found this helpful, kindly share it with someone else and help them too.

Thanks for reading. Peace.. :)



Liked it? Take a second to support admin on Patreon!
  • Nemchand Das

    Wonderful tutorial.. Plz add emoji to chat

    • Tabish Sohail

      u can send emojis as messages from existing code.

  • Tabish Sohail

    How to check member already exists or not in that group.

  • codeWithMe

    when i try to delete a particular member, instead of deleting that member alone in the member board. it also delete other members in the member board. pleases can someone help me out


      same thing happening with me got solution ??

      • codeWithMe

        No, I haven’t. that is why i posted it may be u guys can be of help.