title: How to deal with async request and display the data properly
body: <p>I have a badge component on my html page to indicate how many unread messages. Html code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="font" mat-menu-item routerLink="/message"&gt;
    &lt;mat-icon&gt;notifications&lt;/mat-icon&gt;
    &lt;span [matBadgeHidden]="newMessageNum === 0" matBadge={{newMessageNum}} matBadgeOverlap="false" matBadgeColor="warn"&gt;Messages&lt;/span&gt;
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The variable newMessageNum is obtained through http request to backend. Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>ngOnInit() {
    this.userService.getCurrentUser().subscribe(
      res =&gt; {
        if (res) {
          this.currentUser = res;
          this.messageService.getNewMessagesNum(this.currentUser.username).subscribe(
            res =&gt; {
              if (res.success) this.newMessageNum = res.number;
            },
            err =&gt; console.log(err)
          )
        }
      }
    )
  }</code></pre>
  </div>
  </div>
  
  However the problem is when I log into my website the newMessageNum is 0 and the badge is hidden even if I have several new messages, after I refresh the page, the badge comes out. I think it has something to do with the async request. I'm new at this. Thanks for any help!</p>