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

i new angular2/4 , angular typescript. want disable checkbox 3 second when user clicks on checkbox make server call.

how can in angular 2/4? have included 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 = 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 source array           for( let e of this.eligiblearray )           {             // select accounts 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 )     {       // update model if format rules modified       this.loanamountstring = sout;     }      sout = sout.replace(/\d/g,'');     if( sout.length > 0 )     {       let n: number = number(sout);       if( n < 100000 ) {         this.invalidamountmessage = "amount must >= 100k";         this.isvalidamount = false;       }       else if ( n > 10000000 ) {         this.invalidamountmessage = "amount must <= 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;   } 

since using md-checkbox, can utilize the disabled property.

declare disable flag checkboxes , add timeout function in component.ts.

disableflag = false;  disablecheckbox(){   this.disableflag = true;   settimeout(() =>{     this.disableflag = false;            }, 3000); } 

and add them to md-checbox , 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