ion-list item click and navigate

Question

how to make my ion-list clickable and show details page to show more details about the clicked item

I will make another page like details to handle the details data

but how can I make the list clickable and show another page which have the details my ads page.html which has the ion-list

 <ion-header> <ion-toolbar> <ion-title> My App </ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-item-divider> <ion-label color="dark"> Latest Ads </ion-label> </ion-item-divider> <ion-list *ngFor="let item of dataArray"> <ion-item> <ion-thumbnail slot="start"> <img class="img-thumbnail" src="https://mysite.co/uploads/{{ item.document }}"> </ion-thumbnail> <ion-label> <h2 color="primary">{{ item.title }}</h2> <h3>{{ item.city }}</h3> </ion-label> </ion-item> </ion-list> </ion-content> <ion-footer> <ion-toolbar> <!-- Tab bar --> <ion-tabs> <ion-tab-bar> <ion-tab-button routerLink="/menu"> <ion-icon name="home"></ion-icon> </ion-tab-button> <ion-tab-button routerLink="/contactus"> <ion-icon name="call"></ion-icon> </ion-tab-button> </ion-tab-bar> </ion-tabs> <!-- Tab bar --> </ion-toolbar> </ion-footer>

my ads page.ts file

 import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-adspage', templateUrl: './adspage.page.html', styleUrls: ['./adspage.page.scss'], }) export class AdspagePage implements OnInit { dataArray; constructor(private http: HttpClient) { this.http.get('https://mysite.co/reset-api.php').subscribe((response: any) => { console.log(response); this.dataArray = response; }); } ngOnInit() { } }

Answer 1

`<ion-item button="true" (click)="showDetail()"`

然后你可以在 component.ts 文件中初始化函数 showDetail

Answer 2

On HTML make this changes:

`<ion-list *ngFor="let item of dataArray">` 

must be

`<ion-list *ngFor="let item of dataArray; let i = index">`

And

`<ion-item>` 

must be <ion-item (click)="goDetail(i);">

On ts file you must this method:

`goDetail(num: value){
    console.log("go to page " + num);
    // Add here the code to navigate: e.g this.router.navigate(['page'];
    // You would must import import { Router } from '@angular/router';
}`

Regards,

Answer 3

You can add routerLink now:

<ion-item
  routerLink="/item/details">

You do need to make sure it has a matching route in the routing module.