Как справиться с проблемой CSS в угловых 6

Question

Я пытаюсь отключить кнопку с помощью css, но не могу этого сделать.
Я использовал хост css для заполнения цвета, поэтому я не могу переопределить предыдущий цвет.
Если вы видите мой stackblitz вы можете легко понять.Я пытался отключить кнопки Save 1 и Save 3, но я не смог изменить отключенные кнопки, посмотрите.
Любой может найти проблему, пожалуйста, решите ее.

Ссылка на стек здесь.

Код:

<myngbutton colorfil="filled" [disabled]="disabled1" (onClick)="alertMsg()">Save 1</myngbutton> 

Answer 1

Поскольку вы используете свойство ввода disabled в компоненте myngbutton и добавляете его в качестве атрибута для фактического элемента HTML <button>, вы можете просто переключить свой CSS для отключенных кнопок на:

.btn[disabled] {
    background-color: #cccccc !important;
    color:#cccccc !important;;
    border: 1px solid #cccccc !important;
}

Answer 2

Похоже, что вы пропустили один из входных данных от вашего родителя, т.е. типа.

Попробуйте передать [type]="'button'" в app.component.html

Answer 3

Вы неправильно указали синтаксис для отключен и нажмите .
Попробуйте, я запустил ваш Stackblitz и работает нормально:
<myngbutton colorfil="filled" [class.disabled]="disabled1" (click)="alertMsg()">Save 1</myngbutton>

Надеюсь, ваша проблема будет решена!