Angular Chip represents entities using icons, labels and images.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import { ChipModule } from 'primeng/chip';
Getting Started
Chip can display labels, icons and images.
<p-chip label="Text Only"></p-chip>
<p-chip label="Text with icon" icon="pi pi-check"></p-chip>
<p-chip label="Text with image" image="user.png"></p-chip>
Removable
Setting removable property displays an icon to close the chip, the optional onRemove event is available to get notified when a chip is hidden.
<p-chip label="Text" [removable]="true"></p-chip>
Templating
Content can easily be customized with the dynamic content instead of using the built-in modes.
<p-chip>
Content
</p-chip>
Theming
Chip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG Chip showcase for demos and documentation.