Global Variable?

Hello,

If I change the value of the global variable “image” during runtime (Via clicking the button), I get the following error:

Runtime Error
image is not defined
Stack
ReferenceError: image is not defined
at HomePage.webpackJsonp.194.HomePage.openFirstPage (http://localhost:8100/build/main.js:69:15)
at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:32:31)
at handleEvent (http://localhost:8100/build/vendor.js:13608:172)
at callWithDebugContext (http://localhost:8100/build/vendor.js:15093:42)
at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:14680:12)
at dispatchEvent (http://localhost:8100/build/vendor.js:10057:25)
at http://localhost:8100/build/vendor.js:10671:38
at HTMLButtonElement. (http://localhost:8100/build/vendor.js:36353:53)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4973:33)

My source code is as follows:

home.ts:

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

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

 image = "../../assets/imgs/IMG3.jpg";
  constructor(public navCtrl: NavController) {

  }

  openFirstPage(){
  	image = "../../assets/imgs/IMG4.jpg";
  	console.log('click')

  }

}

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  The world is your oyster!
  <button ion-button full color="light" (click)="openFirstPage()">ClickMe</button>
<ion-list>
  <ion-item>
    <ion-avatar item-start>
     <img src = {{image}}>
    </ion-avatar>
    <h2>Cher</h2>
    <p>Ugh. As if.</p>
  </ion-item>
</ion-list>
</ion-content>

Any suggestions what I am doing wrong? Please note that at the start the variable seems to exist and no error is thrown.

Thanks in advance
Tobias

Don’t use global variables. If you want to store an image source across pages, put it in a provider.

Is home.html and home.ts considered a different page!? Thought these two files belong “together”.

Anyway I created a provider according to the video: https://www.youtube.com/watch?v=ARkSm0KWHaE
and it works. Not sure why it didn’t work with the inital solution though. Any idea?

They’d be considered the same page, and thus not a global variable yes.

The solution to the original way is to change
image = "../../assets/imgs/IMG4.jpg";

In openFirstPage to this.image = ...

1 Like