*ngIf breaks item-right on icon in list

Ionic Framework ionic-v3
1

I have a list, where i want to display an icon in some of the list-items.

i have the following line of code:
<ion-list> <ion-item> Some text <ion-icon name="alert" item-right *ngIf="obs.length > 0"></ion-icon> </ion-item> </ion-list>

This displays the icon, directly behind “some text”, and not at the very right side, as it is supposed to.

If i remove the ngIf=“obs.length > 0” from the ion-icon line, it works perfectly well. So i wonder if ayone else has experienced this, and found a workaround? I suppose that if it’s a bug in ionic itself, it should probably be adressed at some point :slight_smile:

2

This is an issue with Angular’s content projection, there is an open issue for it on our repo here:

and an open issue for Angular here:

The workaround is to wrap it in a template element:

<ion-item>
  Some text
  <template [ngIf]="obs.length > 0" item-right>
    <ion-icon name="alert" item-right></ion-icon>
  </template>
</ion-item>
2 Likes
3

Works like a charm!

Thank you for your help! :slight_smile:

1 Like