Ion-list + ion-chip

Ionic Framework ionic-v3
1

Hi,

I am trying to implement a list where I would like to add an ion-chip component inside an ion-item.

I don’t know why, but its not working:

<ion-list>
    <ion-item text-wrap no-lines>
			<h2><strong>Title</strong></h2>
			<h2>Subtitle</h2>
			<ion-chip>
				<ion-icon name="ios-link-outline" color="gray"></ion-icon>
				<ion-label>Chip</ion-label>
			</ion-chip>
		</ion-item>
</ion-list>

Any help?

2

Same here. It looks as if you can’t embed chips within ion-items. The chip simply does not render
If you ngFor over the chip itself it works …

Unsure if this is by design or simply a bug …

3

It seems that the problem is with ion-label inside ion-item, which is pretty weird.

<ion-chip><span>Text</span></ion-chip>

works ok, so you just have to customize span or copy the original style.

Hope you could find a solution! =)

2 Likes
4

hi! same problem for me

there is an issue about this: https://github.com/driftyco/ionic/issues/10388

5

Try this . For ion-chip “item-content” is necessary . Same for h2 or else you could use ion-label

<ion-list>
      <ion-item text-wrap no-lines>
        <ion-label>
          <h2>><strong>Title</strong></h2>
        </ion-label>
        <ion-label>
        <h2>>Subtitle</h2>
        </ion-label>
        <ion-chip item-content>
          <ion-icon name="ios-link-outline" color="gray"></ion-icon>
          <ion-label>Chip</ion-label>
        </ion-chip>
      </ion-item>
    </ion-list>
5 Likes
6

Thanks for the tip! It helped me a lot

7

This worked for me. Thanks