Ionic 4 Getting ion-item ID or Assigning id/value to ID


I am trying to find a way to get the id of an ion-item when the item is clicked or assign an id to the ion-item. I want to use the ID to display the correct picture on another page. Therefore, I won’t have to add an extra forty pages to my application. html- this is where I need to assign or get the ID of the item

            <img src = "/assets/img/gym.jpg" (click) = "goToFunBuildings()">
            <ion-label color = "light" text-wrap text-right>Campus Gym!</ion-label>
        </ion-item> this is where I will be using the ID to display the correct image of the buildings

can you post the corresponding typescript?

you should be able to use the *ngFor directive to loop over the list for each <ion-item> and pass the index to the goToFunBuildings() method


<ion-item *ngFor="let building of buildingList">
    <img [src]="building.image" (click)="goToFunBuildings(">
<ion-label>{{ building.label }}</ion-label>

with an array of custom “building” Objects in the typescript like this

public buildingList: any[] = [
        id: 1,
        label: 'Campus Gym!',
        image: '/assets/img/gym.png',
        .... //any other properties
    ..... //rest of buildings

Hope this can help you!

1 Like

Thank you so much, this really helped me out a lot. Now, all I have to do is figure out how to reference ID in the fun buildings ts file

goToFunBuildings(id: number) {
    let selected building = this.buildingList.filter((building) => === id)[0];

Can you explain to me what this is doing, because I am getting an error? Thank you!


The filter function iterates through the array and returns the element if the inner function evaluates to true. And the [0] should return the first value, assuming all the ids are unique there should only be 1 item in the array

Can you post the error?

building is underline with the error:

,’ expected.ts(1005) let building: any

Oops I see the problem
Autocorrect on mobile added a space

let selectedBuilding: any

I’m sorry I am still so confused, this is my first time using Ionic.

I added the following in list-building ts file

goToFunBuildings(id: number) {
let selectedBuilding: any = this.buildingList.filter((building) => === id)[0]; }

However, in trying to reference id in fun buildings ts file to display the correct image based on id, it doesn’t work.

 if(selectedBuilding == 1){
      this.angularLogo= "/assets/img/gym.jpg";

You could try setting the img src to


And have a global selectedBuilding variable instead and use this.selectedBuilding instead of let

Or if you have this.angularLogo you can do

this.angularLogo = selectedBuilding.image