title: Angular: Call method after DOM update
body: <p>I am calling a method(which calls a rest service) from html to increment/decrement a count on the screen. Now I want to call another method (i.e. getThreshold) to check if the count reaches a threshold value. If yes I want to show a confirmation message.</p>
  
  <p>I want to update the count on the screen first then call the function to check if it reaches the threshold. But now it is calling the function and rest call first, then updating the count on the screen.</p>
  
  <p><strong>I have to show a confirm dialog before I call the next rest call. But the dialog is showing up before updating the count on the screen.</strong></p>
  
  <p>So here is my code:</p>
  
  <p>component.html</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;a [routerLink]="" (click)="updateCount(inspect, 'A', 'M')" class="btn btn-success"&gt;A-&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>updateCount(inspection, rankName: string, rankPlusOrMinus: string) {
    inspection.rankName = rankName;
    inspection.rankPlusOrMinus = rankPlusOrMinus;
    const url = '/api/xyz';
    this.http
      .post(url, JSON.stringify(inspection), {
        headers: this.headers
      })
      .toPromise()
      .then(response =&gt; {
        let data = response.json();
        if (rankName = 'A') inspection.rankAcount = data.rankAcount; ** // if I call getThreshold from here, it calls the function and rest call and displays alert message. But the count in A is NOT increamented yet**
      })
      .catch(error =&gt; {}
      }
  
    getThreshold(rankName: string, rankAcount: number) {
      const url = '/api/threshold';
      this.http
        .get(url)
        .toPromise()
        .then(response =&gt; {
          // Some Logic
          // Show alert message
        })
        .catch(error =&gt; {});
    }
  }
  </code></pre>