CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic3
Dr. X
Dr. X

Reputation: 2920

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

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

Upvotes: 4

Views: 17894

Answers (3)

Hau Le
Hau Le

Reputation: 301

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>

Upvotes: 0

Sampath
Sampath

Reputation: 65860

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.

Upvotes: 8

Rebar
Rebar

Reputation: 1115

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/

Upvotes: 0

Related Questions