Ionic 4 button ion-item shows as normal button

Ionic Framework
1

Hello so I’ve been using the code that’s in the docs to make a page where there’s a searchbar and a list of items that should be clickable, it goes like this

<ion-header>
  <ion-toolbar>
    <ion-title>Page</ion-title>
  </ion-toolbar>
</ion-header>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-content>
  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      {{ item }}
      </button>  
    </ion-list>
</ion-content>

Yet when I look at it on the app it shows the items like normal buttons, like this:

What am I doing wrong?

2

Actually fixed it. I was following the steps here: https://ionicframework.com/docs/components/#list-lines

But there seems to be an error with the documentation.

<button ion-item *ngFor="let item of items" (click)="itemSelected(item)">
      {{ item }}
      </button>

wasn’t actually working but instead it should be:

<ion-item button *ngFor="let item of items" (click)="itemSelected(item)">
      {{ item }}
    </ion-item>
2 Likes
3

didnt work in ionic 4. any ideas?

4

It does work on v4.9. Side note: the detail arrow shows on iOS, not on MD.