Firebase user object is not fire new changes, upon user updated at child custom element

Question

My code is : in jj-login.html

<paper-icon-item>
 <paper-avatar label="{{user.displayName}}" src="{{user.photoURL}}"></paper-avatar>
......
    <jj-social-icons user={{user}}></jj-social-icons>

At below jj-social-icons.html user object defined and notify true.

user:{type: Object,
       notify:true},

Upon linked social providers (like facebook twetter) I update user.displayName and user.photoURL with new credential's data. with:

user.providerData.forEach(function (profile) {
   if (profile.providerId==authId) {
      user.updateProfile({
           displayName: profile.displayName,
           photoURL: profile.photoURL
      }).then(function() {
        console.log("update succesfull"); // Update successful.
       }, function(error) {
          // An error happened.
      });  
    }

});

Update is successful. But at parent element (jj-login.html, above) user name and photo is not updated automatically. (changes is not effected) How to solve that ?

Answer 1

To notify the data system of a subproperty change, use this.notifyPath():

user.updateProfile(...).then(() => {
  this.notifyPath('user.displayName');
  this.notifyPath('user.photoURL');
});