A Chip is customized using the ng-template element where the value is passed as the implicit variable. The content of ng-template consists of normal text, icons, images, and any other components. Remember that a customized Chip component doesn't have a cross icon, that is, we can remove the Chip entry with backspace only. The customized example of the Chip component with icons would be as follows:

<p-chips [(ngModel)]="complexcontacts" name="template">
  <ng-template let-item pTemplate="item">
    <i class="fa fa-address-card"></i>-{{item}}
  </ng-template>
</p-chips>

In the preceding example, customized content is displayed with the company logo and the contact name. The following screenshot shows a snapshot result of the customized Chip example:

The Chips' user entry actions will be controlled using the max and disabled properties. The maximum number of entries can be restricted using the max attribute. For example, if we set max="5", it won't allow adding a sixth entry in the input. Whereas disabed="true" makes a disabled input, which restricts the Chips' entry.

The PrimeNG 4.1 release introduced inputStyle and inputStyleClass properties for customized input and the allowDuplicate property to control the duplicate inputs.