Search code examples
htmlangulartypescriptprimeng

How can I use a Typescript array in my HTML when using primeng chips?


As mentioned in my subject line how can I change this:

HTML

<p-chip label="1 day(s)" styleClass="p-mb-2 p-mr-2 custom-chip"></p-chip>
<p-chip label="2 day(s)" styleClass="p-mb-2 p-mr-2 custom-chip"></p-chip>
<p-chip label="3 day(s)" styleClass="p-mb-2 p-mr-2 custom-chip"></p-chip>
...

To something like this:

TS

days: string[] = [
'1 day(s)', '2 day(s)', '3 day(s)', '4 day(s)',
'5 day(s)', '6 day(s)', '7 day(s)'

];

HTML

<p-chips label="day of days" style="p-mb-2 p-mr-2 custom-chip"></p-chips>

Solution

  • <p-chips *ngFor="let day of days" [label]="day" class="p-mb-2 p-mr-2 custom-chip"></p-chips>