When I previously used this service in another question:
import { Injectable } from '@angular/core';
import { BehaviorSubject, fromEvent, interval, merge, Observable } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
@Injectable({
providedIn: 'root'
})
export class LanguageService {
private _language: BehaviorSubject<string>;
constructor (
private readonly NgxTranslateService: TranslateService
) {
this._language = new BehaviorSubject("en"); // Default language
NgxTranslateService.use("en");
}
set languageSelected(value: string) {
this._language.next(value);
this.NgxTranslateService.use(value);
console.log(this._language);
}
public getLanguage$(): Observable<string> {
return this._language.asObservable();
}
public getCurrentLanguage(): string {
return this._language.getValue();
}
}
I am currently utilizing this service in home.component.ts but struggling to determine the currently selected language.
In home.component.html, the following code is present:
<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>
How can the home.component.ts file know which language is currently being used through the service?
I am employing the ngx translation library.
switchLang(language: string) {
this.translate.use(language);
this.translateEn = language === 'en';
// this.translate.currentLang;
console.log('current2' ,this.translate.currentLang);
this.langGet(this.language);
}
I have two JSON files:
en.json
{
"NameContact": "Contact ",
"Name": "Name",
"Message": "Message",
"Send": "Send",
"PhoneNo": "Phone No",
"Password": "Password",
"Bio": "Enter bio",
"TermsConditions": "I agree to terms and conditions.",
"Submit": "Submit",
"RoomType": "Room type",
"Reference": "Reference",
"Description": "Description"
}
Currently, there are no issues with translating static text, but the challenge lies in translating the room object. The library documentation does not provide any information on how to translate objects.
<div *ngIf="translateEn == true; then thenBlock4 else elseBlock4"></div>
<ng-template #thenBlock4> <p class="data-room">{{'RoomType' | translate}} {{ room.roomtype }}</p></ng-template>
<ng-template #elseBlock4> <p class="data-room">{{'RoomType' | translate}} {{ room.roomtypeEs }}</p></ng-template>