Wrap ionic chips within ion-item Ionic 4 - ionic-framework

Question

I have a requirement where in i need to wrap ionic chips within ion-item of ion-list.
Below is the code for it.
<ion-content>
<ion-list>
<ion-item *ngIf="showLayout" class="wrapname">
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger" item-content>
<ion-label >Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-item>
</ion-list>
</ion-content>
Below is the scss code for it.
.wrapname{
word-wrap: break-word;
white-space: pre-wrap;
width:100%;
}
I have used word-wrap,but still its not working.
Am i going wrong somewhere??

Answer 1

In Ionic 4 to get <ion-chip> items to wrap inside of <ion-item>, you need to put them inside of a <ion-label text-wrap class="ion-text-wrap">. So in your example, you'd do the following:
<ion-content>
<ion-list>
<ion-item *ngIf="showLayout">
<ion-label text-wrap class="ion-text-wrap">
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>Secondary Label</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
I ran into this same problem and wrapping the ion-chip inside ion-label resolved the issue for me. 👍

Answer 2

You can simply achieve this with the help of *ngFor
Check below code :
.ts:
items = ["Test","Test1","Test12","Test123", "Test1234", "Test12345", "Test123456", "Test1234567", "Test123456", "Test12345", "Test1234", "Test123", "Test12", "Test1", "Test"];
.html:
<ion-content padding>
<ion-chip *ngFor="let item of items;" color="danger" item-content style="margin-left: 10px;">
<ion-label > {{ item }}</ion-label>
<ion-icon name="close"></ion-icon>
</ion-chip>
</ion-content>
Will create a list of chips as below :
StackBiz Demo: https://stackblitz.com/edit/ionic-vscljq
Hope this will helps.