4

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() { }
}
Sampath
  • 63,341
  • 64
  • 307
  • 441
Dr. X
  • 2,890
  • 2
  • 15
  • 37
  • Is `OtherPage` a child of `MyApp`? – bazzells Sep 25 '17 at 23:23
  • @Dr.Geek can you explain briefly what you are trying to do especially that accessedMethod. Also, is app.component and otherpage parent related or completely separate from each other – Mehdi Sep 26 '17 at 04:24
  • Maybe this [answer](https://stackoverflow.com/a/44753236/4254681) would help. If you just want to change menu content in child page, just use [service](https://www.tutorialspoint.com/angular2/angular2_services.htm) – Duannx Sep 27 '17 at 02:15

3 Answers3

8

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.

Sampath
  • 63,341
  • 64
  • 307
  • 441
  • It is not I want. I want to access app.component.ts means that there is something such as a variable I want to change from child page or otherpages. As an example ``, Is it possible to change ion content menu while change in child pages.... – Dr. X Sep 26 '17 at 16:35
  • You can do it using `Events` as I mentioned in a `1st` method. Why can't you use that method? That is the only option you have according to your use case here. – Sampath Sep 27 '17 at 02:16
  • Because if the project is first loaded, app.ccomponent (also menu-items ) loaded and after changes occur in the project pages we could not change the parameters in the existing app.component.ts ... – Dr. X Sep 27 '17 at 08:56
  • Hope you'll update your question with your specific use case.At this moment you just put a generic question. i.e. how to access method and variable. – Sampath Sep 27 '17 at 09:10
  • I will try your answer first, then I can change – Dr. X Sep 27 '17 at 09:23
  • Glad to hear that it helped :) – Sampath Sep 27 '17 at 20:55
0

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/

Rebar
  • 1,076
  • 10
  • 19
  • It is not that I want. I want to access app.component.ts ! – Dr. X Sep 26 '17 at 23:46
  • I know I tried it too, but pages are capsuled in Ionic/Angular. You could try to trigger across your pages with jquery and your index.html as an alternative. I did that for my media database – Rebar Sep 26 '17 at 23:55
0

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>
Hau Le
  • 191
  • 1
  • 4