Nir Schwartz Nir Schwartz - 2 years ago 1787
HTML Question

Angular2 disable button

I know that in angular2 I can disable a button with the

attribute, for example:

<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

but can I do it using
? Like so:

<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>


Answer Source

Basically you could use ngClass here. But adding class wouldn't restrict event to fire. For firing up event on valid input, you should change click event code to below. So that onConfirm will get fired only when field is valid.

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

Demo Here

But still I'm in big question, why you don't wanted to use [disabled] attribute binding provided by angular2? Its more preferred solution to with it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download