Chat app with Ionic 3 & Firebase – Ep. 4 – Profile tab

Hi Friends,

Hope you are all well. This is part 4 of my chat app with firebase & Ionic series. In this part, we’ll see how to bring in data to the profile tab and then create provisions for the user to edit his nick name or profile picture.

The screencast for this part.


The code for this part is available – here.

The complete code for this series is available here. (Please note that this is a work in progress and new code will be added to this repo in every part)

I presume you either have the code of the previous 3 episodes, or have pulled the combined repo of the previous three episodes and have it ready. So, I’ll start from there.

Now open up profile.scss and add the below code.

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

Add the above code inbetween the <ion-content> tags.

As you can see we have 5 divs. One of it is a spacer and one is an instructional message. So let’s ignore them.

Apart from that, we have an image, a header to display our nick name and a button to log out.

But we need data to get populated when this tab loads or when the user navigates to this tab right ?

Open up profile.ts and add the below function to do the same.

The code is pretty much self-explanatory. I have added a loaduserdetails() method that attempts to load the user details whenever the user enters this tab.

Wait, we don’t have a getuserdetails() method in user Provider right. So, let’s create that.

Open user.ts (in the providers directory) and add the getuserdetails function()

We are simply making a call directly to the node (since we are using the uid as the key) and getting the values which we are then passing to profile tab.

Now run the app and you will see a screen as shown below, when you try to visit the profile tab.


As you can see our nick name and profile pic has been loaded.

Now first let’s finish off the log out button.


Open up profile.ts and add the below code.

Now the logout button should work fine.

Editing the Nick name:

Now let’s write some code to update the nick name. Open up profile.ts and add the below code.

This might look big, but in reality it’s not. I am just creating an alert that has an input field and a couple of buttons. Just enter a new name in the input field and click on edit. If you notice in the handler for the edit button we are calling a new method called updatedisplayname(). Let’s go ahead and create that.

Open up user.ts file and add the below method.

As you can see, I am simply updating the profile of the user based on this uid. Nothing complicated in this right ?

Your final user.ts file would look like this.

Now that we have the code in place. Let’s run the app again. If everything goes fine, you would see the below screens.





Cool, Now that you can edit your nick name, let’s write some code to change the profile picture as well.

Editing the profile pic:

If you remember, in the previous episode we wrote code to choose and image from the phone’s file system and store it in firebase storage and update it in the user’s collection. Why not reuse the same code ?

Open up profile.ts and add code. Your profile.ts should look like this now.


Kindly refer to the previous part where I have given detailed info on how we are choosing and storing an image. We are simply making use of the uploadimage() from image handler provider and update image from user provider to achieve our desired functionality here.

If everything goes fine, you would see that you would be able to update the profile image as well.




Now we have a profile tab where we can change our nick name and profile picture and also log out of our application.

That’s all for this part guys. Now if you notice, we have a complete user management system that we can make use of for any application that we are building (provided you use Ionic 3 and firebase).

Hope you found this helpful guys. If you found this helpful kindly consider supporting me on patreon by clicking here. This will help me keep this content free for all.

Kindly share it with someone and help others too.

Thanks for reading guys. Peace.. :)

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


    I appreciate your nice work. keep it up buddy. hope the next episode soon.

    somehow I faced a problem in image upload. when creating account, unable to pass the profile picture page if I try to set it, the loading never ends.
    In profile page when try to change picture, nothing happens.

    so I tried using “‘@ionic-native/camera’;” in uploadimage function following way and now it works fine without any problem.

    uploadimage() {
    let loader = this.loadingCtrl.create({
    content: ‘Please wait’
    const options: CameraOptions = {
    quality: 100,
    var promise = new Promise((resolve, reject) => {
    //alert(“1”); => {
    var imageStore = this.firestore.ref(‘/profileimages’).child(firebase.auth().currentUser.uid);
    imageStore.putString(imageData, ‘base64’).then((res) => {
    this.firestore.ref(‘/profileimages’).child(firebase.auth().currentUser.uid).getDownloadURL().then((url) => {
    }).catch((err) => {
    }).catch((err) => {

    }, (err) => {
    }).catch((err) => {
    return promise;

    And another suggestion, I added below code in app.component.ts to keep the user logged in while app reopens until he intentionally sign out.

    this.afAuth.authState.subscribe(auth => {
    this.rootPage = ‘TabsPage’;

    I assume this may be helpful to others too. So, please consider adding this feature in a future episode.

    Thank a lot for bringing such nice and valuable videos. the way you work is interesting.
    Wish you all the very best.

    • Thanks man..

      • Thilina Ranathunga

        😉 you are very welcome.

    • Kuldeep Μaurya

      Damn..thanks alottttt buddy!!!!
      Was facing this pblm with image thing.. and the login snippet is a great addition.
      I also added that in my code.

      • Kuldeep Μaurya

        Hey @thilinaranathunga:disqus
        I am still facing the image problem
        during signup its showing please wait on and on
        and edit image in profile tab, when clicked is not doing anything.
        Any ideas?

        • Thilina Ranathunga

          Okay, good.

        • danty kane

          what kind of firebase bucket setting? I am not aware of any firebase bucket settings or anything like that. please explain

      • Thilina Ranathunga

        I am Glad being helpful. 😉

    • Betty

      Hi i’m Betty nice to meet you ! thanks a lot for your help ! can you explain to me how can i add an alert when somone receive a new message ,maybe something like the name of the friend turn to anathor color,or a number appear on the name ,i tried but i failed,i will be so much grateful if you can help me thank you :)

    • danty kane

      Can you explain in a little more detail ? like where to add these things on which page? I’m a complete noob and I could really use some help right now

  • Mayank Chaudhari

    Does this app show the chat offline too? Is this app “PROGRESSIVE WEB APP”? If not then can you show the demo of progressive web app with ionic 3 and firebase?

    • Nope.. The engine of this app is firebase and you need a working internet connection to play around.. Progressive web app is just a fancy term given to web apps.. There’s nothing new in that.. Normal web apps run in a browser.. Hybrid mobile apps run inside browsers too.. but they are wrapped with a framework like cordova which opens the browser and runs the app inside it thereby tricking the user to believe that it’s a mobile app.. Progressive web app is a common term used to denote both..

  • Hicham Shadow


    thank you for your valuable work,
    how can we subscribe to the user status : connected or disconnected ?

    thank you again

  • Aman Gojariya

    ERROR Error: Uncaught (in promise): Error: StaticInjectorError[FileChooser]:
    NullInjectorError: No provider for FileChooser!

    Please help me i have done this tutorial but this problem is occured

  • Will Smith

    it is a good tutorial. very nice.

    but, i have a problem , so please help me.
    There is an error in the profile picture change.

    “ionic cordova run browser”

    i touch the picture at profile page to change.

    then, this follow error in console.
    “error: exec proxy not found for :: FileChooser :: open”

    What happened?

  • danty kane

    Hi, first of all thanks for a great tutorial. Secondly I’m having a problem with image upload. I have followed all steps correctly. Then I literally downloaded all your code and tried to run it but still have a problem while image upload. It doesn’t upload anything. Nor anything goes in the storage. It just keeps showing the “please wait” loader and doesn’t proceed any further. And if try to change the image from profile page, nothing happens on there either. Name gets changed but the image doesn’t. Is there anything I need to add to my firebase storage? like rules or something? Cz I checked it and it was completely empty there was no folder named “profileimages” so I created one myself but still it’s not working. Kindly provide a solution as soon as you can. I’m stuck on it for days now. I’m awaiting for your reply. Thanks..

  • danty kane

    Well, you guys will thank me for this..The reason for image upload failing is because when we generated the FireBase key (app.firebaseconfig.ts), “storageBucket” was unused hence it is empty in the app.firebaseconfig.ts. So open storage in firebase website, create a folder named profileimages/, and then come back to “add firebase to your webapp”. You’ll see that “storagebucket” link has been generated. now copy that and paste it in app.firebaseconfig.ts and boom.. it will start working. You’re welcome

  • vozax developer

    i am getting that error cordova not available can you help me Raja