Disable a button once clicked in Angular2

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

Angular2

Typescript

JavaScript


Start






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 ?

disabled

4 Answers
4

You can use following approach without touching your component,

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


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;
}


This is the correct solution if you want to disable/enable button based on any other operation perform.
– ruchit07
Dec 7 '17 at 10:14

You could use ngClass directive to deal with classes:

import {Component} from '@angular/core';

@Component({
selector: 'my-app',
providers: ,
template: `


Start

</div>
`,
styles: [
`
.md-btn md-btn-success {
...
}
.md-btn disabled {
...
}
`
]
})
export class App {
isButtonDisabled: false;

constructor() {
}

}

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: `


push2disable

disabled

`
})

export class TextAreaComponent {
isPushed: boolean = false;


pushMe() {
this.isPushed = true;
}
unPushMe() {
this.isPushed = false;
}
}

Perfect , thanx :)
– selem mn
Jun 18 '16 at 17:52

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.