Open a page upon clicking a image in grid view

Hi there i have created a image grid view now i wanted that images to be clickable and upon clicking it should open desired page ex-contact,about. hope you guys will help i am very new to this, have a great day.

<ion-content padding="true">

    <div class="row">
        <div class="col">
          <img src="assets/imgs/coming-soon.jpg" style="display: block; width: 100%;height: auto; margin-left: auto; margin-right: auto;">
        </div>
        <div class="col">
          <img src="assets/imgs/Other.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;">
        </div>
        </div>
        <div class="row">
        <div class="col">
          <img src="assets/imgs/nee-prema.jpg" style="display: block; width: 100%;height: auto; margin-left: auto; margin-right: auto;">
        </div>
        <div class="col">
          <img src="assets/imgs/viluvaina.jpg" style="display: block; width: 100%;height: auto; margin-left: auto; margin-right: auto;">
        </div>
        </div>
  

</ion-content>

so , you will need a (click)="???()" where ???() is some method in your page ts code to handle the click.
you will need to add that for every image… and pass some data with the click to tell the code WHICH image was clicked.

then in the click handler you can calculate what page to display and then use the NavController to push that screen to the top (make it visible).

like this, where I open my Home page

import {  NavController} from 'ionic-angular';
 constructor(public navCtrl: NavController,,,)
{
}
//openpage using lazy loader
self.navCtrl.push('HomePage')

the home page looks like

@IonicPage() 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'

})

export class HomePage {
...

Hi sdetweil,
thank you for the response but i am sorry as i was very new i was not able to get it i am little confused. Up on clicking say for first image commin-soon.jpg i need to open contact.html page( which is one of the default pages in app with tabs),
here is the code in .ts page look like how i am supposed to do changes

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  constructor(public navCtrl: NavController) {

  }

}

Untitled
Can you please let me know a sample code for one image click,Sorry for my request hope you understand as i am a new user.

We are going to use push here, i suggest you read this doc.

In your HTML add this to your existing img

<img (click)="imAclickMethod()">

In your TS
Import your Contacts page!

import { ContactsPage } from '../your/path/';

export class AboutPage {

  constructor(public navCtrl: NavController) {
  }

  imAclickMethod(){
     this.navCtrl.push(ContactsPage);
  }

*Note: I still used a click event here instead of push event in HTML, why I do this ? It is easier to add simple codelines then than with using [navPush]="".

<ion-content padding="true">

    <div class="row">
        <div class="col">
          <img src="assets/imgs/coming-soon.jpg" style="display: block; width: 100%;height: auto; margin-left: auto; margin-right: auto;" (click)="openSubPage('contact')">
        </div>
        <div class="col">
          <img src="assets/imgs/Other.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"  (click)="openSubPage('other')">
        </div>
        </div>
        <div class="row">
        <div class="col">
          <img src="assets/imgs/nee-prema.jpg" style="display: block; width: 100%;height: auto; margin-left: auto; margin-right: auto;"  (click)="openSubPage('nee-prema')">
        </div>
        <div class="col">
          <img src="assets/imgs/viluvaina.jpg" style="display: block; width: 100%;height: auto; margin-left: auto; margin-right: auto;"  (click)="openSubPage('viluvaina')">
        </div>
        </div>
</ion-content>
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  constructor(public navCtrl: NavController) {

  }
  openSubPage(pageName+'Page')  // note  this string is the className of the Page u want to open (found in the page's .ts file)
  {
       // note that you open the 'PAGE' not the HTML
       self.navCtrl.push(pageName)
  }
}

to support lazy loading (loading at run time vs at compile time), the page definition needs

@IonicPage() 

added in front of component line (if it doesn’t have it)

@Component({ 

(note that the ABOVE AboutPage class does NOT have @IonicPage() added )

lazy loading keeps the memory footprint down.

Hi cherry,
Thank you soo much for your support its working like charm, Have a great day.

just fyi, cherry used the not lazy loading approach.

he had to include the sub page class, even if its not used.
he used the classname without quotes

Hi sdetweil,
Thank you for the code its working great thank you, have great day.