How to dynamically change primeNG styleClass?-CodePudding

html:<p-button styleClass="p-button-override"> </p-button>

css: :host ::ng-deep .p-button-override{ background-color: green; }

This makes the button green, but trying to change this dynamically with [ngClass] doesn't work:

<p-button [ngClass]="{'p-button-override' : 2 > 0}">next</p-button>

How can styleClass be accessed in html with if conditions?

CodePudding user response：

You can use styleClass property directly but with square brackets so you can pass in an expression.

<!-- replace TRUE with your own expression below -->

<p-button [styleClass]="true ? 'p-button-override': '' "> </p-button>

:host ::ng-deep .p-button-override { 
  background-color: green;
}