title: How to disable button until an async function call is over?
body: <p>I have a button on the frontend that calls an async method which then calls an external REST Controller to refresh (delete current -> create new) a Calendar. The problem is that if the button is clicked multiple times before the first REST call process is completed, it creates multiple calendars. I want to disable the refresh button until the async method (and the REST call inside of it) is finished. 
  How can this be achieved? I am using Angular4.</p>
  
  <p>I tried using a flag that I set as soon as the function is called and reset it at the end of the function. This did not work.</p>
  
  <p>HTML button code:</p>
  
  <pre><code>&lt;!-- refresh button --&gt;
  &lt;button md-button type="button" class="mat-button active (click)="refreshCalendar(team)"&gt;
    Refresh
  &lt;/button&gt;
  </code></pre>
  
  <p>Async refreshCalendar method:</p>
  
  <pre><code>  async refreshCalendar(teamName: string) {
      // Some code ..
  
      this.calendarSvc.refreshCalendarForTeam(teamId);
    }
  </code></pre>
  
  <p>Async refreshCalendarForTeam method:</p>
  
  <pre><code>  async refreshCalendarForTeam(teamId: number) {
      // URL creation ..
  
      return this.http.post(url, {}) // REST call here
        .map(response =&gt; {
          return response.toString();
        }).subscribe(() =&gt; { });
    }
  </code></pre>