ClassNames
ClassNames provides extended class binding functionality that is not possible with the native Angular directives.
Import #
import { ClassNamesModule } from 'primeng/classnames'
Examples #
pClass directive accepts a string, array, object or any combination of these types with support for nesting.
Angular's native directive does not support white-space separated multiple string values as in the Array and Conditional examples. In addition Combination of multiple types, or even nesting is also not available in the native directive.
String
Array
Conditional
Combination
<div pClass="py-4 px-8 border border-surface rounded-lg">String</div>
<div [pClass]="['py-4', 'px-8', 'bg-primary text-primary-contrast', 'font-semibold', 'rounded-lg']">Array</div>
<div [pClass]="conditionalClasses()" (click)="toggle1()">Conditional</div>
<div [pClass]="comboClasses()" (click)="toggle2()">Combination</div>
