I am facing an issue with language selection in my Angular project. I have two components, home.components (father) and room.component.ts (son), which support both English and Spanish languages.
When I switch the language in the room component and then navigate back to the home component, the selected language is not maintained consistently across both components.
How can I resolve this issue? Should I use output() and input()? Or should I leverage Angular's lifecycle hooks?
home.component.ts
<ul class="navbar-nav navbar-right">
<span class="form-inline">
<select
class="form-control"
#selectedLang
(change)="switchLang(selectedLang.value)">
<option *ngFor="let language of translate.getLangs()"
[value]="language"
[selected]="language === translate.currentLang">
{{ language }}
</option>
</select>
</span>
</ul>
<div *ngIf="translateEn == true; then thenBlock else elseBlock"></div>
<ng-template #thenBlock> <p class="title-room">{{ room.title }}</p></ng-template>
<ng-template #elseBlock> <p class="title-room">{{ room.titleEs }}</p></ng-template>
switchLang(language: string) {
this.translate.use(language);
this.translateEn = language === 'en';
this.translate.currentLang;
console.log('current' ,this.translate.currentLang);
}
room.component.ts
<div *ngIf="translateEn == true; then thenBlock3 else elseBlock3"></div>
<ng-template #thenBlock3> <p><span class="bold-data">{{'RoomType' | translate}}</span> {{ room.roomtype }}</p></ng-template>
<ng-template #elseBlock3> <p><span class="bold-data">{{'RoomType' | translate}}</span> {{ room.roomtypeEs }}</p></ng-template>
switchLang(language: string) {
this.translate.use(language);
this.translateEn = language === 'en';
this.translate.currentLang;
console.log('current' ,this.translate.currentLang);
}