Ionic list item clickable

Ionic Framework ionic-v3
1

How can all my items from a ion-list be clickable?

 <ion-list>
      <ion-item-sliding #item>
        <ion-item *ngFor="let item of testService">
            {{item.DEVICE}}
            <button item-right (click)="onClick();$event.stopPropagation();"></button>
        </ion-item>
      </ion-item-sliding>
  </ion-list>
1 Like
2

Hello,

In your HTML file :

<button item-right (click)="your_function(your_parameter)"></button>

In your .ts file :

your_funtion(your_parameter) {
    // Type your code here
}

This sould work I guess

1 Like
3

yeah worked, but now my question is how can I pass the DEVICE that I’ve selected to the next page?

goToDevice(){
    this.navCtrl.push(DeviceIndepthPage);
  }

and let the item.DEVICE appear as the <ion-title> ? </ion-title> ?

4

You first need yo push your data to your next page :

goToDevice(your_item){
   this.navCtrl.push(DeviceIndepthPage, {item: your_item});
 }

Then you can get your item (with the key “item”) with NavParams in your next page : https://ionicframework.com/docs/api/navigation/NavParams/

When you have your parameter in your next page, you can just show it like this :

<ion-title>{{ your_item }}</ion-title>
5 
goToDevice(item){
    this.navCtrl.push(DeviceIndepthPage, {item: item});
  }

<ion-item *ngFor="let item of testService">
            {{item.DEVICE}}
            <button item-right (click)="goToDevice(item.DEVICE)"></button>
        </ion-item>

and the last one:<ion-navbar> <ion-title> {{ item }} </ion-title> </ion-navbar>

not working, what’s wrong?

6

In your 2nd page .ts file, you need to get your parameter :

constructor(public navParams: NavParams){
   // item is the object we have in our nav-parameters
   this.item = this.navParams.get('item');
}

Without this it can’t work. You also need to declare “this.item” in your .ts file of course

7 
private item: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // item is the object we have in our nav-parameters
    this.item = this.navParams.get('item');
    console.log(this.item);
  }

undefined is what I get

8

Take a look at this repo :

There’s 2 pages, one with a list where selected items are passed to the 2nd page. And in the 2nd page, you can see that you get the values and show it in the page.

You can compare your code to this one which is the official Ionic doc

9

not working, is different.

10

html 1st page:

<ion-item [(ngModel)]="myParam" ngDefaultControl *ngFor="let item of iobService">
            {{item.DEVICE}}
            <button item-right (click)="pushParams()"></button>
        </ion-item>

ts 1st page:

pushParams() {
    this.navCtrl.push(DeviceIndepthPage, { 'myParam': this.myParam });
  }

ts 2nd page:

// item is the object we have in our nav-parameters
    this.myParam = navParams.get('myParam');
    console.log(this.myParam);
11

Just change this and it’ll work i think :

html 1st page (i would remove the ngModel tag):

<ion-item ngDefaultControl *ngFor="let item of iobService">
            {{item.DEVICE}}
            <button item-right (click)="pushParams(item.DEVICE)"></button>
        </ion-item>

ts 1st page:

pushParams(myParam) {
    this.navCtrl.push(DeviceIndepthPage, { 'myParam': myParam });
  }

Let me know if it’s ok now

12 
this.myParam = navParams.get('myParam');
console.log(this.myParam);

this.myParam is empty…