title: Use Promise function in Angular 6 Data Binding
body: <p>I'm having an issue where I am using an async function in Angular 6 data binding:</p>
  
  <pre><code>&lt;span *ngIf="application.status == 'in-progress'; else new"&gt;
    {{getAssignedUser(application.user_id)}}
  &lt;/span&gt;
  </code></pre>
  
  <p>The <code>getAssignedUser()</code> is an async function which fetches a document from Firestore and I want to display the assigned user's firstname which I received from Firestore. The only problem here is I can't display the firstname value OnInit. If I insert a button and add a click event, it displays the name.</p>
  
  <p><strong>Component:</strong></p>
  
  <pre><code>async getAssignedUser(id): Promise&lt;string&gt; {
      if (id != null) {
          return this._usersService
          .getUserById(id)
          .then(data =&gt; {
              this.assignedUser = data.user_fname;
              return this.assignedUser;
          })
      } else {
          return null;
      }
  }
  </code></pre>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>getUserById(id): any {
      let user: any;
      user = this.afs.collection('agents').doc(id).ref.get().then(function (doc) {
          if (doc.exists) {
              user = doc.data();
              console.log(user);
              return user;
          }
          else {
              console.log('No such document');
          }
      }).catch(function (error) {
          console.log('Error getting document: ', error);
      })
      return user;
  }
  </code></pre>
  
  <p>Any help please?</p>