How can I display selectBox items in chips?

Question

I want to display data in chips using selectBox, but I got a problem while displaying these items like this:

My TS:

selectedPointsForts: any[]=[];
listPointsForts: any[]=[];

 SelectPointsForts() {
    this.PointsFortsService.findAll().then((res) => {
      this.listPointsForts= res.map(function(obj: any) {
        return {
          value: {
            id: obj.id,
            name: obj.libelle
          },
          label: obj.libelle
        };
      });
    });
  } 

My HTML:

<p-multiSelect [options]="listPointsForts" [(ngModel)]=" selectedPointsForts" [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=2></p-multiSelect>
          <p>Selected Cars: </p>
          <p-chips [(ngModel)]=" selectedPointsForts"  > </p-chips> 

Can anyone help me to fix this problem !

Answer 1

You can place pTemplate in <p-chips> element to format the chip items' displayed output.

<p-chips [(ngModel)]="selectedPointsForts">
  <ng-template let-item pTemplate="item">
    {{ item.id }} - {{ item.name }}
  </ng-template>
</p-chips>

Sample Solution on StackBlitz

Output

---

References

Chips (Custom Content)