How to make clickable images


#1

Hi , i am new using this framework need your help , Actually i want when i click on image a new page must be shown , how to do this ?
sorry for my bad english


#2

JUst add inside your image (click)="yourFunction()". Or make your image inside div:

<div (click)="yourFunction()">
    <img>
</div>

#3

yes i did like (click)=“openPharmacyPage()” . but its not working
it shows me error like this

and code for openPharmacyPage is


#4

what’s the code of your function? i mean ‘openPage()’


#5

can you show me your function openPage()


#6

yeah sure actually the real function is openPharmacyPage()
and code of this function is


#7

This happens a lot just restart your server. ionic serve


#8

after restarting it showing me this error
actually i dont want to open it in navigation or side menu i just want to open it like another screen
just like first screen and screen will be the page named PharmacyPage


#9

I need to see your whole page.ts and page.html to be safe


#10

this is page.html

and this is code in app.component.ts file where i have define function (click)=“openPharmacyPage()” within img


#11

please help me out its my semester project


#12

Just throwing it out there but it sounds like your stuff is in the wrong place. If your html is called “page.html” and that is where the click event is, then the function “openPharmacyPage()” would need to be in “Page.ts” not in “app.component.ts” The reason you are getting that error is because it can’t find the “openPharmacyPage” function in the correct scope. It is looking for it in “Page.ts”


#13

if i place it in page.ts i have to change code to display another page which i want to show
and the code is not working in page.ts too
i have checked


#14

Hmm… sounds like a scope problem to me. Based on your description either the “openPharmacyPage()” needs to be in Page.ts or your html that calls it would need to be in app.html.

The project structure I am seeing based on what you’re saying and showing is this…

src

  • app.component.ts

  • app.html

  • app.module.ts

  • app.scss

  • main.ts

pages

  • home-page

  • list-page

  • blood-page

If this is correct, which of these holds the HTML that calls the function?

One last thing I am noticing. You are not setting a root page in your app.component.ts file. You should set “this.rootPage” in app.component.ts, then move the “openPharmacyPage” function to that page, as well as the html. Most commonly you would do something like this in app.component.ts…

@Component({
    templateURL: 'app.html'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(...) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      this.rootPage = HomePage;
    });
  }
}

Then in home-page.ts you would have your main home page and the openPharmacyPage function, and in the home-page.html file you would have your html that calls the function.


#15

yes you are right :slight_smile:
Home-page holds that function


#16

if i want to do from home-page.html and home-page.ts then what changes i need to do


#17

If you wantt to do this all from HomePage then you are going to want you app.component.ts do nothing more than load up your HomePage, like so…

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(
      public platform: Platform,
      statusBar: StatusBar,
      splashScreen: SplashScreen
  ) {
     
    this.platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      this.rootPage = HomePage;
    });
  }

}

Then in your app.html

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Now, in your home page you want the actual function and display, so something like…

home.ts

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

@Component({
    selector: 'home-page',
    templateURL: 'home.html'
})
export class HomePage {
    constructor(public navCtrl: NavController) {
    }

    openPharmacyPage() {
      this.navCtrl.push(BloodPage);
    }
}

then your home.html

<ion-header>
  <ion-navbar>
    <ion-title text-center>2Freedom!</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="icons_div_left">
    <span>
      <img class="icons_div_img_left" src="../../assets/icon/im..." (click)="openPharmacyPage()">
    </span>
    <span class="txt_divs_left">
      Medicine
    </span>
  </div>
</ion-content>

Obviously change names as you need to for correct directories, but that is about what it should be.


#18

Thank you soo much you help me a lot :slight_smile:
its really great


#19

No problem. I know how hard it can be to be stuck on this stuff. If you need anymore help don’t hesitate to ask.


#20

yes sure :slight_smile:
Thank you
But may be due to my region every time i have to wait for at least 8 minutes to reply you back