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() {
}
}