1

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

enter image description here

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 !

Yong Shun
  • 35,286
  • 4
  • 24
  • 46
drnwork
  • 37
  • 6

1 Answers1

0

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)

Yong Shun
  • 35,286
  • 4
  • 24
  • 46
  • I got the cross on the word !! I mean the cross of the remove item on the label !! do u know what is the problem pls ? – drnwork Sep 29 '21 at 14:24
  • Hi, do you mean the remove icon for the chip item? If yes, that is the default behavior for the chip item. – Yong Shun Sep 29 '21 at 23:43
  • like this https://files.fm/thumb_show.php?i=bn7u3xqsq ! is there any solution? – drnwork Sep 30 '21 at 07:47
  • This looks like CSS issue from your side. You may adjust the CSS with `p-chips-token` and `p-chips-token-label` classes. You may check out the [Styling section](https://www.primefaces.org/primeng/showcase/#/chips). – Yong Shun Sep 30 '21 at 07:59