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