DEV Community

loading...
Cover image for Angular Chip

Angular Chip

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Templating

Content can easily be customized with the dynamic content instead of using the built-in modes.

<p-chip>
    Content
</p-chip>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide