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() { }
}

user_1077309 · Answer

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. i.e. 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.

user_5535773 · Answer

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/

user_7165026 · Answer

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:

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

3 Answers