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';
}