Is there a way to trigger a reset of ngOnInit() upon changing a variable?
I am trying to reset ngOnInit() when the theme variable changes. Here is my code:
Settings.ts
export class SettingsPage implements OnInit{
phraseColor: string;
ngOnInit() {
let tch : {} = {'#3f51b5': 'Blue', '#ff9800': 'Orange'}
let ColorName = tch[this.settingsService.theme]; /* here is the issue */
this.phraseColor = ColorName;
}
changeTheme(){
this.settingsService.theme = '#ff9800';
}
}
Settings.html
<div>Theme is {{ phraseColor }}</div>
<button (click)="changeTheme()">Change language</button>
I am experiencing an issue with the phraseColor variable.
The default value of phraseColor is Blue
When I change the theme variable using changeTheme(), I expect the value of phraseColor to be Orange
However, the value of phraseColor remains Blue
Interestingly, when I navigate away from the page and return, the value of phraseColor is indeed Orange
My question is: how can I force a restart of ngOnInit to update the interpolation?
The theme variable is located in SettingsService.ts
export class SettingsService {
theme: string = '#3f51b5';
}