Angular 2/4. How to disable a checkbox for few seconds when a checkbox is clicked

Question

I am new to Angular2/4 and angular typescript. I want to disable all the checkbox for 3 second when a user clicks on a Checkbox to make a server call.

How can I do that in Angular 2/4? I have included the code snippet below:

wiz.component.html

 <div class="table-header header-eligible">
      <div class="select-all">
        <md-checkbox name="chkSelectAll" [(ngModel)]="isSelectAll" (change)="onSelectAll()"></md-checkbox>
      </div>
      <div>Account Number</div>
      <div>Client Name</div>
      <div>Account Type</div>
      <div class="datatype-numeric">Long Market Value</div>
      <div class="datatype-numeric">Estimated Borrowing Power</div>
    </div>
    <div *ngFor="let e of eligibleArray; let i = index;" >
      <div class="table-content content-eligible">
        <div>
          <md-checkbox name="chkSelect{{i}}" [(ngModel)]="e.isSelected" (change)="onSelect(i)"></md-checkbox>
        </div>
        <div class="link" (click)="openAccountPopUp(i)">{{e.accountNumber}}</div>
        <div>{{e.clientName}}</div>
        <div>{{e.accountType}}</div>
        <div class="datatype-numeric">{{e.marketValue | currency:'USD':true}}</div>
        <div class="datatype-numeric">{{e.advanceAmount | currency:'USD':true}}</div>
      </div>
    </div>

wiz.component.ts

     initSelected(): void {
        if( this.advisorClientModel.pledgedAccounts.length == 0 )
        {
          // Init first time from source array
          for( let e of this.eligibleArray )
          {
            // select all accounts by default, first time in
            e.isSelected = true;
          }
          this.isSelectAll = true;
        }
        else 
        {
          for( let e of this.eligibleArray )
          {
            if( this.advisorClientModel.pledgedAccounts.includes(e.accountNumber) )
              e.isSelected = true;
          }      
          let selectedCount = this.advisorClientModel.pledgedAccounts.length;
          if( selectedCount == this.eligibleArray.length )
          {
            this.isSelectAll = true;
          }
        }
        this.updateSelectedTotals();
      }
 updateSelectedTotals(): void {
    this.invalidAccountsMessage = "";
    let marketTotal:number = 0;
    let advanceTotal:number = 0;
    for( let e of this.eligibleArray )
    {
      if( e.isSelected )
      {
        marketTotal = Number(marketTotal) + Number( e.marketValue);
        advanceTotal = Number(advanceTotal) + Number( e.advanceAmount);
      }
    }
    this.eligibleSelected.marketValue = marketTotal;
    this.eligibleSelected.advanceAmount = advanceTotal;
  }

  onChangeAmount(): void {
    // Apply Amount Format
    let sIn: string = this.loanAmountString;
    let sOut: string = this.inputMaskService.getFormatAmount(sIn);
    if( sIn != sOut )
    {
      // Only update model if format rules modified it
      this.loanAmountString = sOut;
    }

    sOut = sOut.replace(/\D/g,'');
    if( sOut.length > 0 )
    {
      let n: number = Number(sOut);
      if( n < 100000 ) {
        this.invalidAmountMessage = "Amount must be >= 100K";
        this.isValidAmount = false;
      }
      else if ( n > 10000000 ) {
        this.invalidAmountMessage = "Amount must be <= 10 Million";
        this.isValidAmount = false;
      }
      else 
      {
        this.loanAmount = n;
        this.isValidAmount = true;
      } 
    }
    else
    {
      this.isValidAmount = false;
    }
  }

  onChangeMax(): void {
    this.loanAmountString = "";
    this.loanAmount = 0;
    if( this.isMaximumAmount )
    {
      this.isValidAmount = true;
    }
    else
    {
      this.isValidAmount = false;
    }
  }

  onSelect(i:number): void {
    this.isSelectAll = ( this.numberOfSelectedAccounts() == this.eligibleArray.length );
    this.updateSelectedTotals();
  }

  onSelectAll(): void {
    for( let e of this.eligibleArray )
    {
       e.isSelected= this.isSelectAll;
    }
    this.updateSelectedTotals();
  }

numberOfSelectedAccounts(): number {
    let selectedCount = 0;
    for( let e of this.eligibleArray )
    {
      if( e.isSelected ) selectedCount++;
    }
    return selectedCount;
  }

Answer 1

Since you are using md-checkbox, we can utilize the the disabled property.

Declare a disable flag for the checkboxes and add a timeout function in component.ts.

disableFlag = false;

disableCheckBox(){
  this.disableFlag = true;
  setTimeout(() =>{
    this.disableFlag = false; 
          }, 3000);
}

And add them to to md-checbox and change event:

<md-checkbox name="chkSelectAll" 
             [(ngModel)]="isSelectAll" 
             (change)="onSelectAll(); disableCheckBox()"
             [disabled]="disableFlag"></md-checkbox>


<md-checkbox name="chkSelectAll" 
             [(ngModel)]="isSelectAll" 
             (change)="onSelectAll(); disableCheckBox()" 
             [disabled]="disableFlag"></md-checkbox>

Plunker example