Language API
A list of TranslocoService language-related API methods and their usages
getDefaultLang()
Returns the default language of the application.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
const defaultLang = translocoService.getDefaultLang();
console.log(defaultLang);
}
}
setDefaultLang()
Sets the default language.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
translocoService.setDefaultLang('es');
}
}
getActiveLang()
Returns the current active language.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
const activeLang = translocoService.getActiveLang();
console.log(activeLang);
}
}
setActiveLang()
Sets the active language for the application.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
translocoService.setActiveLang('es');
}
}
getAvailableLangs()
Retrieves the list of available languages.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
const availableLangs = translocoService.getAvailableLangs();
console.log(availableLangs);
}
}
setFallbackLangForMissingTranslation()
Defines a fallback language to be used when a translation key is missing for the active language.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
translocoService.setFallbackLangForMissingTranslation({
fallbackLang: 'he',
});
}
}
Note
If you provide an array, only the first language is used. Fallback translations for missing keys support a single language.
setAvailableLangs()
Sets the list of available languages.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
translocoService.setAvailableLangs(['en', 'es']);
// Alternatively, use an array of objects for additional metadata
translocoService.setAvailableLangs([{ id: 'en', label: 'English' }]);
}
}
langChanges$
An observable that emits whenever the active language changes.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
translocoService.langChanges$.subscribe(lang => {
console.log(`Language changed to: ${lang}`);
});
}
}
Note
langChanges$
will emit the currently active language immediately upon subscription.
load()
Loads the specified language and adds it to the service.
app.component.ts
export class AppComponent {
constructor(private translocoService: TranslocoService) {
translocoService.load('en').subscribe(() => {
console.log('Language loaded successfully');
});
}
}