How to access the app.component variables and methods from other pages in Ionic?

Question

I want to access and change app.component.ts variable or access methods from other pages ( otherpage.ts ) or other components such as;

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  accessedVariable: any;

  constructor(){ }

  accessedMethod() {
   ..something
  }

}

otherpage.ts

@Component({
  selector: 'page-other',
  templateUrl: './otherpage.html',
})
export class OtherPage {

  constructor() { }
}

Answer 1

18-02-2020

Please don't use Event emitter . Use the Observable pattern. Otherwise, you'll have to face issues when updating to the Ionic 5 . ie no Event API on Ionic 5 .

Original

You can do this in a number of ways.

One method where I can tell you is using Events .

Events is a publish-subscribe style event system for sending and responding to application-level events across your app.

Another method may be using the provider .On that use case, you can share your methods and variables through the provider .

Answer 2

The fastest way is to use a GlobalVars Provider:

install it first with:

ionic g provider globalvars

this will automatically add the new provider to your app.module.ts file

import {Injectable} from '@angular/core';
@Injectable()
export class GlobalVars { 
myGlobalVar: any;
constructor() { 
this.myGlobalVar = ""; 
} 

setMyGlobalVar(value) { 
this.myGlobalVar = value; 
}

getMyGlobalVar() { 
return this.myGlobalVar; 
} 
}

You define there getter and setter methods and the needed variable can be accessed through an Instance of this class! in YourOtherPage.ts you can get the variable with: this.glVars.getMyGlobalVar() for example.

here you can read more about it: https://ionicallyspeaking.com/2016/03/10/global-variables-in-ionic-2/

Answer 3

My use case Ionic 5 Capacitor: I wanted to show ion-spinner in ion-header of a header component. In the header component, I subscribe to the observable variable which I can set true in another service. The approach is flexible and I can use it in child or parent components/pages.

MyService.service.ts: (initialises the observable variable and set method)

import { BehaviorSubject } from 'rxjs';

export class MyService {

    spinnerBehavior = new BehaviorSubject(false);
    obSpinner: any = this.spinnerBehavior.asObservable();

    set spinner(showSpinner: boolean) {
        this.spinnerBehavior.next(showSpinner);
    }
}

AnotherService.service.ts:

export class AnotherService {

    constructor(private myService: MyService) {}

    public someMethod() {    
        this.myService.spinner = true;
    }
}

MyComponent.component.ts:

export class MyComponent implements OnInit {
    public showSpinner: boolean;

    constructor(private myService: MyService) {}

    ngOnInit() {
        this.myService.obSpinner.subscribe(showSpinner => {
          this.showSpinner = showSpinner;
        });
      }
}

MyComponent.component.html:

<ion-spinner *ngIf="showSpinner"></ion-spinner>