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 class directive does not support combining multiple types with a single directive, nor white-space separated values in a single string.
Note: For Tailwind Users, it is recommended to use the classAttributes configuration for intellisense support.
pClass Directive
String
Array
Combined
Nested
Native Class Directive
String
Array
Combined
<div class="flex flex-col gap-4">
<div class="font-semibold">pClass Directive</div>
<div class="flex flex-wrap items-center gap-4">
<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]="['p-4 rounded-lg', ['cursor-pointer', 'select-none', 'border'], { 'bg-primary text-primary-contrast border-primary': active1() }]" (click)="toggle1()">Combined</div>
<div [pClass]="nestedClasses()" (click)="toggle2()">Nested</div>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="font-semibold">Native Class Directive</div>
<div class="flex flex-wrap items-center gap-4">
<div class="py-4 px-8 border border-surface rounded-lg">String</div>
<div [class]="['py-4', 'px-8', 'bg-primary', 'text-primary-contrast', 'font-semibold', 'rounded-lg']">Array</div>
<div
class="p-4 rounded-lg"
[class]="['cursor-pointer', 'select-none', 'border']"
[class.bg-primary]="active1()"
[class.text-primary-contrast]="active1()"
[class.border-surface]="active1()"
[class.border-primary]="active1()"
(click)="toggle1()"
>
Combined
</div>
</div>
</div>
