I have ionic page that have an image with 100% width and 100% height, I want to change the image source when I click on it.

this is the html source :

<ion-content>
    <ion-img class="map" src="img/map.jpg" (click)="changeView()"></ion-img>
    <ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
    <ion-icon class="icon-heart" name="md-heart"></ion-icon>
    <ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
    <ion-fab top right>
        <button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
    </ion-fab>
    <ion-fab top left>
        <ion-searchbar> </ion-searchbar>
    </ion-fab>
    <ion-fab bottom right class="fablocate">
        <button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
    </ion-fab>
    <ion-fab (click)="ListParrots();" bottom left class="linklist">
        <ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
    </ion-fab>
</ion-content>

ts source code is below :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';

/**
 * Generated class for the MapPage page.
 *
 * See  for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

   images: String[] = Array("img//map.jpg", "img/map1.jpg");

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  changeView(){

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');
  }

  ListParrots(){
    this.navCtrl.push(ParrotListPage);
  }

}

can some one help please to plete all the function? thank !

I have ionic page that have an image with 100% width and 100% height, I want to change the image source when I click on it.

this is the html source :

<ion-content>
    <ion-img class="map" src="img/map.jpg" (click)="changeView()"></ion-img>
    <ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
    <ion-icon class="icon-heart" name="md-heart"></ion-icon>
    <ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
    <ion-fab top right>
        <button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
    </ion-fab>
    <ion-fab top left>
        <ion-searchbar> </ion-searchbar>
    </ion-fab>
    <ion-fab bottom right class="fablocate">
        <button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
    </ion-fab>
    <ion-fab (click)="ListParrots();" bottom left class="linklist">
        <ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
    </ion-fab>
</ion-content>

ts source code is below :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {ParrotListPage } from '../parrot-list/parrot-list';

/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework./docs/ponents/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class MapPage {

   images: String[] = Array("img//map.jpg", "img/map1.jpg");

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  changeView(){

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapPage');
  }

  ListParrots(){
    this.navCtrl.push(ParrotListPage);
  }

}

can some one help please to plete all the function? thank !

• javascript
• html
• css
• angular
• ionic2

Share Improve this question Follow edited Jun 2, 2020 at 16:45 jaibalaji 3,48522 gold badges1717 silver badges3030 bronze badges asked Oct 5, 2017 at 16:27 547n00n547n00n 1,54666 gold badges3333 silver badges6161 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Change your template:

<ion-img class="map" [src]="picToView" (click)="changeView()"></ion-img>

And declare a variable in the class:

picToView:string="img/map.jpg";  // always instatiate with a valid value

And changeView:

  changeView(){
          this.picToView=.....
  }

Regards

Tom