title: Disable button when download is in progress Angular 4
body: <p>I am using angular 4 in my app. I implemented a download funtionality which will be processed after clicking one button. When download will finished user will see the download link below. Now the download data are coming from rest api. I am using ngx-progressbar to show progress while downloading. When user will click the download button each time he will get a notification "OK" or "Not Ok" (if error occurs in newtwork). I am very new in handling angular stuff now. I would like to disable the button while download is in progress.But in my case all the timeI can click the button, even it is in progress. I would like to kno whow can I make my button disabled. Here is my code. I am giving only related code for that</p>
  
  <p><strong>RESOLVED CODE</strong></p>
  
  <p>angular.ts</p>
  
  <pre><code>import { NgProgress } from 'ngx-progressbar';
  
  export class downloadReportComponent implements OnInit {
  
  private buttonDisabled: boolean = false;
  
  constructor( private websocketService: WebSocketService,
               public progressService: NgProgress) {
               }
  
  ngOnInit() {
      this.currentUser = this.authService.userSnapshot;
      this.loadReportConfig();
      this.downloadReport();
  }
  
  downloadReport(){
      //download report code
  }
  startLoading() {
      this.progressService.start();
      this.buttonDisabled=true;
  }
  
  stopLoading() {
      this.progressService.done();
      this.buttonDisabled=false;
  }
  
  doTestReport() {
      this.buttonDisabled=true;
      this.disco.getResourceTree().subscribe( api =&gt; {
  
          this.http.get( api.metrics.test.uri )
              .subscribe( r =&gt; {
                  if(r!=null) {
                      this.notificationService.showOK("OK");
                      this.buttonDisabled=false;
                  }
                  }, e =&gt; {
                  this.notificationService.showError( "not so OK" );
                  console.log( "error", e );
              } );
      } );
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div fxLayout="row" fxLayoutAlign="right" class="overview-actions"&gt;
  &lt;mat-card-actions &gt;
  &lt;button class="material-icons" (click)="doTestReport()" [disabled]="buttonDisabled" &gt;&amp;#xE149;&lt;/button&gt;
  &lt;/mat-card-actions&gt;
  &lt;/div&gt;
  &lt;ng-progress
          [minimum]="0.15"
          [maximum]="1"
          [positionUsing]="'marginLeft'"
          [direction]="'leftToRightIncreased'"
          [color]= "'#f5f5f5'"
          [trickleSpeed]="500"
          [thick]="true"
          [ease]="'linear'"&gt;
  &lt;/ng-progress&gt;
  </code></pre>