Chat app with Ionic 3 & Firebase – Ep. 14 – Removing members and group info

Hi Friends,

Hope you are all well. In this post, we’ll continue from where we left off in our previous part and add features such as removing members and viewing group info in our groups.

I presume you have already read my previous posts in this series and you have a copy of the repo of the code so far with you.

Let’s begin.

A screencast of this post.


The code for this part 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. Thanks.)

Open up groupmembers.ts file and add the below code.

Nothing new to explain, I guess. We are just getting all the members of the group and displaying them as a (searchable) list. The owner can remove the members off the group when he slides the member’s name to the left.

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

Next let’s write the actual deletemember() function in the groups provider.

Open the groups.ts (inside the providers directory) and add the below function in it.

Let’s break this down.

  1. We are first getting a reference of the member under the members list of the group’s instance under the group owner’s id and removing that instance.
  2. Then we are navigating to the member’s uid and removing the group instance from there as well.
  3. Then we are calling the getintogroup() function once to provide an updated list of members to the list.
  4. Note that we have subscribed to the gotintogroup event in groupmembers.ts file which is the event that getintogroup() publishes after pulling all the current members of the group.

Now run the app, if everything goes fine you should see a screen as shown below.


Okay, let’s move on to group info.

Open up groupinfo.html file and add the below code.

This is just to display the members in the group as a list.

Open up groupinfo.ts and add the below code.

Wait, what’s with the ownership..?

We have the members list only under the owner’s uid right ? But we have the group info option under the member’s action sheet as well remember..?


So, we need to get the member’s list for the group member as well.

This is where the getgroupmembers() function comes in. Open groups.ts (in the providers directory) and add the below code.

The above code is pretty much simple. We are simply navigating to the instance of the group under the person’s uid and then getting the value of the owner field in that.

Then using that uid, we are simply traversing to the owner’s uid and getting the list of members under his instance of the same group.

Now run the app, if everything goes fine then you would see a screen like the one shown below.


That’s it for this part guys. In our next episode, we’ll see how to delete the group and also how a member can leave the group.

Finally, a word of thanks to all my supporters on patreon. If you would like to keep such content free of charge, kindly consider supporting me by clicking here.

if you would like to donate via paypal click here.

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

Thanks for reading. Peace.. :)

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