Disable button after clicking Angular2 button

Question

I have a dumb problem, but I did not know how to overcome it, since I use Angular2 ( Typescript ) not JavaScript tools. I have this HTML code

 <div class=" uk-align-center" > <a class="md-btn md-btn-success" >Start</a> <!--<a class="md-btn disabled" *ngIf="">Start</a>--> </div> 

I just want to change the status of the button to disabled after clicking, I found Javascript methods, but none of them worked for me, please help?

Answer 1

You can use the following approach without touching your component,

 <a class="md-btn md-btn-success" [class.disabled]="isClickedOnce" (click)="isClickedOnce = true">Start</a> 

Answer 2

another solution with code side:

 <button name="submitButton" #submitButton type="submit" class="btn btn-primary" (click)="onButtonClick()">Submit</button> import { ViewChild, ElementRef } from '@angular/core'; @ViewChild('submitButton') submitButton:ElementRef; onButtonClick() { this.submitButton.nativeElement.disabled = true; //Do some other stuff, maybe call a service etc... this.submitButton.nativeElement.disabled = false; } 

Answer 3

You can use the ngClass directive to work with classes:

 import {Component} from '@angular/core'; @Component({ selector: 'my-app', providers: [], template: ` <div> <div class=" uk-align-center" > <a [ngClass]="{'md-btn md-btn-success': !isButtonDisabled, 'md-btn disabled': isButtonDisabled }" (click)="isButtonDisabled = !isButtonDisabled;">Start</a> </div> </div> `, styles: [ ` .md-btn md-btn-success { ... } .md-btn disabled { ... } ` ] }) export class App { isButtonDisabled: false; constructor() { } } 

Answer 4

I am using Angular2 -RC2. This is how I use * ngIf, maybe this helps. NOTE: in this example, after clicking the button, it will be disabled, so you cannot click it to call unpushMe () again.

text-area.component.ts

  import {Component} from '@angular/core'; @Component({ selector: 'textarea-comp', template: ` <div> <div *ngIf="!isPushed" > <p><button (click)="pushMe()">push2disable</button></p> </div> <div *ngIf="isPushed" > <p><button (click)="unPushMe()" disabled >disabled</button></p> </div> ` }) export class TextAreaComponent { isPushed: boolean = false; pushMe() { this.isPushed = true; } unPushMe() { this.isPushed = false; } }