Angular Chips is used to enter multiple values on an input field.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {ChipsModule} from 'primeng/chips';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Chips requires an array as its model.
<pre><code class="lang-html">&lt;p-chips [(ngModel)]="values"&gt;&lt;/p-chips&gt;
</code></pre>
<pre><code class="lang-js">export class MyModel {

 values: string[];

}
</code></pre>
<h3 id="model-driven-forms">Model Driven Forms</h3>
Chips can be used in a model driven form as well.
<pre><code class="lang-html">&lt;p-chips formControlName="cities"&gt;&lt;/p-chips&gt;
</code></pre>
<h3 id="custom-content">Custom Content</h3>
A chip is customized using a ng-template element where the value is passed as the implicit variable.
<pre><code class="lang-html">&lt;p-chips [(ngModel)]="values"&gt;
 &lt;ng-template let-item pTemplate="item"&gt;
 {{item}} - (active) &lt;i class="pi pi-user"&gt;&lt;/i&gt;
 &lt;/ng-template&gt;
&lt;/p-chips&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Chips supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/chips">Chips</a> showcase for demos and documentation.

Angular Chips is used to enter multiple values on an input field.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {ChipsModule} from 'primeng/chips';
```

### Getting Started

Chips requires an array as its model.

```html
<p-chips [(ngModel)]="values"></p-chips>
```

```js
export class MyModel {

 values: string[];

}
```

### Model Driven Forms

Chips can be used in a model driven form as well.

```html
<p-chips formControlName="cities"></p-chips>
```

### Custom Content

A chip is customized using a **ng-template** element where the value is passed as the implicit variable.

```html
<p-chips [(ngModel)]="values">
 <ng-template let-item pTemplate="item">
 {{item}} - (active) 
 </ng-template>
</p-chips>
```

### Theming

Chips supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Chips](https://primefaces.org/primeng/showcase/#/chips) showcase for demos and documentation.