angular 6 override css with condition

Question

I used ng-select in my project, i removed the cross clear icon using [clearable]="false", and i removed also the clear icon for each item by overriding the ng-value-icon class

:host ::ng-deep .ng-value-icon {
    display: none !important;
}

i want to apply the css with condition

  constructor() {
    if(this.result === "ok") {
      //apply the css
    }
  }

stackblitz

Answer 1

This part of the template (from your Stackblitz) wich decides over the class custom relates to a scope var named step:

   [class.custom]="step === 'step1'"

So, use it:

  step: 'step1'|'not-step1' = 'not-step1';

  constructor() {
    if(this.result === "ok") {
      this.step = "step1";
    }
  }

or you change the condition in the template into

   [class.custom]='result === "ok"'

Or, most likely better than this css-toggle, you can use*ngIf

  *ngIf="result === 'ok'"

.