Update ionic component view across app through settings page

Ionic Framework ionic-v3
1

I am working on an app, which has an ionic component with the temperature of surroundings. This detail is fetched from TemperatureService I created.

Now, in the settings tab, I need the ability to change between Celcius and Fahrenheit and this change should reflect all across the app wherever the component is used.

The HTML file for the page has the component included like this :

<ion-col> 
        <app-temperature-meter></app-temperature-meter>
</ion-col>

And the temperature is fetched from service in this way :

ngOnInit() {
    this.loadedEnvironment = this.currentPlace.getEnvironment();
    this.temperatureToShow = this.tempCtrl.toCurrentUnit(this.loadedEnvironment.currTemp);
  }

where tempCtrl is the service and toCurrentUnit() converts the input temperature to the temperature in current units (C or F).

The problem here is that since the temperatureToShow is determined during ngOnInit , it does not dynamically change when I change the settings in my settings page.

Already Tested : Since this component is used on multiple pages, I have checked the correct functioning of the service and ngOnInit function. They seem to work (ie. if a page is loaded the first time and ngOnInit is called, the temperature shown is in the currently required units)

Expectations : Is there something similar to ionViewWillEnter for components, such that whenever they are on the screen, I can check for the current temperature units from service and change the view accordingly

2

Please see How I Learned To Stop Worrying About Lifecycle Events. In your case, you’ve already done much of the work, because TemperatureService is already present and available to provide Observables. I’m not sure from what you’ve posted whether currentPlace is something that can or should also be tracked in the service, but assuming it isn’t:

type TemperatureScale = "c" | "f";
private scale$ = new BehaviorSubject<TemperatureScale>();
private scalify(temp: number, scale: TemperatureScale): string {
  /* TODO */ 
}  
displayTemperature(place: Place): Observable<string> {
  return this.scale$.pipe(
    map(scale => this.scalify(place.currTemp, scale));
}

Naturally, if there is a logical way to encapsulate the concept of “current place” into the service, then displayTemperature can do all its work with no arguments, and the component no longer needs to track currentPlace at all.