How to create a function for my "View Courts" button to display another list of information? NEW TO IONIC T_T

@MongLou wrote:

Hi Guys, I am new to IONIC. I am so struggled to figure out how to get this done.

Capture.JPG1366x768 35.9 KB

courts.ts
import { Component } from ‘@angular/core’;
import { NavController, NavParams} from ‘ionic-angular’;

@Component({
selector: ‘page-courts’,
templateUrl: ‘courts.html’
})
export class CourtsPage {

courtsinfo = [
//States
{ “StatesImg”: “selangor.png”, “States”: “Selangor” }, { “StatesImg”: “kualalumpur.png”, “States”: “Kuala Lumpur” },
{ “StatesImg”: “penang.png”, “States”: “Penang” }, { “StatesImg”: “johor.png”, “States”: “Johor” },
{ “StatesImg”: “perak.png”, “States”: “Perak” }, { “StatesImg”: “kedah.png”, “States”: “Kedah” },
{ “StatesImg”: “perlis.png”, “States”: “Perlis” }, { “StatesImg”: “melaka.png”, “States”: “Melaka” },
{ “StatesImg”: “negerisembilan.png”, “States”: “Negeri Sembulan” }, { “StatesImg”: “kelantan.png”, “States”: “Kelantan” },
{ “StatesImg”: “terengganu.png”, “States”: “Terengganu” }, { “StatesImg”: “sabah.png”, “States”: “Sabah” },
{ “StatesImg”: “sarawak.png”, “States”: “Sarawak” }, { “StatesImg”: “putrajaya.png”, “States”: “Putrajaya” },
{ “StatesImg”: “labuan.png”, “States”: “Labuan” }

]

constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
}
}

courts.html

Discover Courts

{{info.States}}

View Courts

Posts: 1

Participants: 1

Read full topic