How to define global properties of app?

How to define global properties of an application? For example I have a feature to add some x page to favourite list and then go to that page from any page. So where do I define that array of favourite pages so that I can access it globally in my app from any component.
Also for example if in settings user have changed the theme to dark, how do I know that in some other page?

seems like you need persistent storage for both your favourite pages and theme
you should use ionic storage

1 Like

To me and many, the best suggestion is to create a provider, that will be called in app.component.ts and every page you need.
See it as a service on windows, or daemon in linux/mac OS. There is no equivalent in TypeScript/Angular 2 of a global variable like in PHP for example. But tons of variations (both rxJs style (@injectable) and Angular style (observables/promises) variables).

A provider can be set to serve a const or fixed value, for example, at the start of the app. Then according to pages, you will set this value as an observable, and modify it at will, from any children page. One issue with that for example, is you don’t want to subscribe to a variable value forever, because you don’t want your app to lag as hell if it becomes huge, nor crash if it becomes null or undefined on some pages of your app.
In that way, it’s not a “super global value”, rather a “drive” value that you update on-the-go.

Alternatively, you can make the php equivalent of DEFINE (another const) in app.component.ts too. That will also work.

I have no time to write a full example, but I hope it gave you a clearer picture.

1 Like

The most important question here is “do I want this to persist across restarts of the app?”. If so, use ionic-storage. If not, use a provider.

2 Likes