Добавить класс через ngClass, если нажата отключенная кнопка

Создайте логическое свойство в своем компоненте, т.е. activeClass, прослушайте событие щелчка на кнопке, чтобы переключить его, а затем просто используйте ngClass для назначения класса в зависимости от логического значения.

[ngClass] = "'yourClass': activeClass"

редактировать

Как правильно указано, вы не можете прослушивать события на отключенной кнопке. Решение этой проблемы - обернуть элемент div и прослушивать события этого элемента (подробнее см. Ответ это) или использовать класс для имитации отключенного эффекта.

В Angular нет удобного способа сделать это. Структура Angular такова, что вам не следует вручную проверять DOM, за исключением редких случаев. Если вы должны это сделать, ознакомьтесь с эта ссылка, в этом принятом ответе есть решение, которое может быть вам полезно.

Альтернативный подход может заключаться в том, чтобы всегда добавлять класс .error по щелчку, но строить свой sass так, чтобы свойства .error активировались только тогда, когда также присутствует .disabled.

Например:

<button (click) = "isError = true" [ngClass] = "{error: isError}">My Button</button>

А затем в вашем SASS:

.disabled.error {
  //Your style here
}

Если ваша кнопка отключена, она не будет прослушивать событие (click). В этом случае вы можете сделать так, чтобы она выглядела как отключенная с помощью css и включила атрибут disabled после его нажатия.

в вашем компоненте:

clickedMe: boolean = false;

В вашем HTML:

<button [disabled] = "(!isTermAgreed || isLoading) && clickedMe" [ngClass] = "{'disableCss': (!isTermAgreed || isLoading), 'error': clickedMe && (!isTermAgreed || isLoading)}"(click) = "payForStory(paymentObject.StoryId); clickedMe = true">

И ваш css будет примерно таким:

.disableCss {
    background: #dddddd
}

Вы не можете прослушивать события щелчка на отключенной кнопке. Вы можете добавить к кнопке отключенный класс, а затем прослушивать события как обычно. Пожалуйста, просмотрите этот stackblitz: https://stackblitz.com/edit/angular-3ksttt

Составная часть:

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

Шаблон:

<button [ngClass] = "isButtonClicked ? 'error' : ''" (click) = "disableButtonClick()" class = "disabled">BUTTON</button>