Normal html tags like <span>, <p>, <h2> are not rendering in side <ion-list>

Hi,
I’m using IONIC 3.19.1.

<ion-content padding>
<ion-list>
  <button ion-item *ngFor="let shift of shifts">
    <h2>{{shift.operatorCode}}</h2>
    <p>{{shift.date}}</p>
    <button>hi</button>
  </button>
</ion-list>
<ion-fab  right bottom>
  <button ion-fab [navPush]="shiftSetup"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>

in the above code snippet the <h2>{{shift.operatorCode}}</h2> <p>{{shift.date}}</p> are note rendering. Pls see the attachment.
ionic

U need to wrap items in ion-item

See the example in the ionic doc on ion-list

Hi Tommertom,

This code snippet is copied from the official doc and here they just used <h2> and <p> tag.

<ion-list>
  <ion-item>
    <ion-avatar item-start>
      <img src="img/avatar-cher.png">
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
</ion-list>

Please see the link.

Thanks

Why do you have two button defintions of which one is nested in the other?

Remove the outer and make it ion-item (with the ngFor) and the look what happens?

yeah i have already tried it but the result is the same.

Not sure if you can put these tags in an ion-button. Ion-button as ion-item has its own very designated styling (with >)

Maybe use (click) handler on ion-item instead of using button?

Take the working example u showed from the doc

> 
> <ion-list>
>   <ion-item (click)="whatever()">
>     <ion-avatar item-start>
>       <img src="img/avatar-cher.png">
>     </ion-avatar>
>     <h2>Cher</h2>
>     <p>Ugh. As if.</p>
>   </ion-item>
> </ion-list>

Hi, Tommertom.
The issue was with the .
I have changed it to and its worked.

Thanks for the support