Disable a button once clicked in Angular2 - html

Question

I have a silly problem but i didn't know how to overcome it since i'm using Angular2 (Typescript) stuffs not JavaScript's 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>
Simply , I want to change the button status to disabled once clicked, I found Javascript ways but none of them worked for me, any Help please ?

Answer 1

You can use 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 could use ngClass directive to deal 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'm using Angular2-RC2. This is how i use *ngIf, maybe it helps.
NOTE: in this example, once the button is pressed, it will be disabled, so you cannot click it to call the function unpushMe() anymore.
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;
}
}