How to make css recognize a custom angular object is disabled?-CodePudding

I've been having trouble changing the colours of a custom disabled angular button. The button (or better - the button element) is conditionally disabled and that part works perfectly, but I need to set the colour of the disabled button to seem disabled (e.g grey) except when I inspect the element it seems to have the styles shown below despite being disabled. I've tried setting ef-ng-b2b-button:disabled {background: black !important} but it doesn't seem to work.

How it looks currently:

How it's supposed to look:

HTML

<ef-ng-b2b-button
    ef-feature-id="vp.configurator.model-info-dialog.create-offer"
    size="l"
    type="primary"
    prefixIcon="add"
    (click)="createConfiguration('offer')"
    [disabled]="!configurationValid"
  >
    {{ 'vp.modules.configurator.create.offer' | ppTranslate }}
  </ef-ng-b2b-button>
  <ef-ng-b2b-button
    *ngIf="showContract"
    ef-feature-id="vp.configurator.model-info-dialog.create-contract"
    size="l"
    type="primary"
    prefixIcon="add"
    (click)="createConfiguration('contract')"
    [disabled]="!configurationValid"
  >
    {{ 'vp.modules.configurator.create.contract' | ppTranslate }}
  </ef-ng-b2b-button>

CSS

div:nth-child(1) {
  display: flex;
  justify-content: flex-start;
}

div:nth-child(2) {
  display: flex;
  justify-content: flex-end;

  ef-ng-b2b-button:first-child {
    margin-right: 10px;
  }
  
  ef-ng-b2b-button:nth-child(2) {
    margin-right: 10px;
  }
}

CodePudding user response：

You need to attach a style to this element: ef-ng-b2b-button with angular. CSS doesnt notice the changes of the disabled button that come from changes in angular. In this case, the behavior isnt like it is for dom events such as 'hover', 'mouseover', 'focus', etc.

Try something along these lines:

<ef-ng-b2b-button
ef-feature-id="vp.configurator.model-info-dialog.create-offer"
size="l"
type="primary"
prefixIcon="add"
(click)="createConfiguration('offer')"
[disabled]="!configurationValid"
[style.color]="!configurationValid ? 'black': 'blue' "  > 
{{ 'vp.modules.configurator.create.offer' | ppTranslate }}

CodePudding user response：

Look into the NgClass directive to set css classes on your condition with the ternary operator

https://angular.io/api/common/NgClass

<div [ngClass]="condition == true? 'enabledCssClass' : 'disabledCssClass' " >

or just use an ngIf with your condition and place two different button elements on the html page