Add class through ngClass if a disabled button is clicked - html

Question

I want to be able to add a scss class ("error") to an element, if a [disabled] button is clicked. How do i achieve this?
Angular2 disable button
the [disabled] attribute is required, so this is not a working solution.
<button [disabled]="!isTermAgreed || isLoading" (click)="payForStory(paymentObject.StoryId)">
scss class that a span element will recieve through [ngClass]:
&.error {
border: 2px solid red;
}

Answer 1

You cannot listen for click events on a disabled button. You could add a disabled class to the button and then listen for events as normal. Please review this stackblitz: https://stackblitz.com/edit/angular-3ksttt
Component:
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
isButtonClicked: boolean = false;
public disableButtonClick() {
this.isButtonClicked = true;
}
}
Template:
<button [ngClass]="isButtonClicked ? 'error' : ''" (click)="disableButtonClick()" class="disabled">BUTTON</button>

Answer 2

Create a boolean property in your component, I.e. activeClass, listen for a click event on your button to toggle it, and then simply use ngClass to assign the class depending on the boolean.
[ngClass]="'yourClass': activeClass"
edit
As correctly pointed out, you can't listen to events on a disabled button. A solution to this is to wrap the element with a div and listen to events on that element (see this answer for more details) or to use a class to simulate the disabled effect.

Answer 3

Whenever the button is disabled, a class of button:disabled will be added by default. So you can put your styles in the class. As shown:
button:disabled {
background-color: #97929248;
cursor: not-allowed;
}

Answer 4

There is no pretty way to do this in Angular. The way Angular is structured such that you shouldn't be manually checking the DOM except in rare circumstances. If you must do this, check out this link, this accepted answer has a solution that may be useful to you.
An alternative approach could be to always add the .error class on click, but construct your sass such that the properties of .error would only be activated when .disabled is also present.
For example:
<button (click)="isError = true" [ngClass]="{error: isError}">My Button</button>
And then in your SASS:
.disabled.error {
//Your style here
}

Answer 5

If your button is disabled then it won't listen to the (click) event, In this case one thing you can do is to make it look like disabled using css and enable the disabled attribute once its clicked.
in your component:
clickedMe: boolean = false;
In your HTML:
<button [disabled]="(!isTermAgreed || isLoading) && clickedMe" [ngClass]="{'disableCss': (!isTermAgreed || isLoading), 'error': clickedMe && (!isTermAgreed || isLoading)}"(click)="payForStory(paymentObject.StoryId); clickedMe = true">
And you css will be something like:
.disableCss {
background: #dddddd
}