CODEWITHSUNDEEP
ionic-frameworkionic2
arun kumar
arun kumar

Reputation: 735

Ionic2: How to make the ion-in ion-list item clickable?

I have a page to show a list of branches and select a branch to go to next page.

How to make the ion-item clickable, capture the click and select item?

I tried this code and it works. But, it shows a list of buttons. 

 <ion-list>
    <ion-item *ngFor="let branch of branchArray">
       <button ion-button full (click)='goHome(branch)'>
          {{branch.name}}
       </button>              
    </ion-item>
 </ion-list>

Upvotes: 2

Views: 17135

Answers (2)

Ope
Ope

Reputation: 797

The accepted answer is not completely correct. The Ionic documentation says (now, might have been different at the time of answer):

A basic item should be written as a <ion-item> element when it is not clickable.

and later

The attribute ion-item should be added to a <button> when the item can be clicked or tapped.

So you should use this code instead:

<ion-list>
    <ion-item button *ngFor="let branch of branchArray"  (click)='goHome(branch)'>
        <!-- Inner code here depending on your styling. -->
    </ion-item>
</ion-list>

This changes the semantics of the ion-item and then styles are alse updated accordingly: You do not need to hack your CSS files.

Upvotes: 13

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

I think buttons getting displayed is an UI issue. Since I do not know the exact requirement of how it should be displayed, check out how to use ion-list here as you want. You can also style it in CSS according to your requirement.

As far as the clickable part : what you have also works, but, make item clickable like this:

<ion-list>
    <ion-item *ngFor="let branch of branchArray"  (click)='goHome(branch)'>
        <button ion-button full>
            {{branch.name}}
        </button>             
    </ion-item>
</ion-list>

Upvotes: 3

Related Questions