Search code examples
ionic-frameworkangularionic2ionic-view

ionic2 + angular2 - disable button on click


I have list of rows, and each one row has 2 more more buttons. I want to disable button on click event, so once its done ajax call then I can reenable it or hide it completely.

So I'm wondering how can I disable this single button on click event.

how can I disable from event?

<button [disabled]="buttonDisabled" (click)="trigger($event)">

trigger ($event)
{
  $event.buttonDisabled = true; // ?
}

Solution

  • <div *ngfor="#row of rows">
      <button [disabled]="awaitingAjaxCall[row] ? true : null" (click)="trigger($event, row)">
    </div>
    
    rows: [0,1,2];
    awaitingAjaxCall:boolean[] = [false, false, false];
    trigger ($event, row)
    {
      this.awaitingAjaxCall[row] = true;  
      this.http.get(...).map(...).subscribe(value => {
        this.value = value;
        // or here
        // this.awaitingAjaxCall[row] = false;
      }, error => {},
      () => this.awaitingAjaxCall[row] = false);
    }