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