Language API

Below is a list of the TranslocoService API and their usages:

getDefaultLang()

Returns the default language:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.getDefaultLang();
  }
}

setDefaultLang()

Sets the default language:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.setDefaultLang('es');
  }
}

getActiveLang()

Gets the current active language:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.getActiveLang();
  }
}

setActiveLang()

Sets the current active language:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.setActiveLang('es');
  }
}

getAvailableLangs()

Gets the available languages:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.getAvailableLangs();
  }
}

setFallbackLangForMissingTranslation()

Sets the fallback translation language for the currently active language in case of a missing key:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.setFallbackLangForMissingTranslation({
      fallbackLang: 'he',
    });
  }
}

warning

If you pass an array, the first value is used. The reason for that is that fallback translation for a missing key only supports one language.

setAvailableLangs()

Sets the available languages:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.setAvailableLangs(['en', 'es']);

    // Or use an object
    translocoService.setAvailableLangs([{ id: 'en', label: 'English' }]);
  }
}

langChanges$

Listens to the language change event:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.langChanges$.subscribe(lang => ...);
  }
}

note

langChanges$ will emit the active language on subscription.

load()

Load the given language, and add it to the service:

app.component.ts

export class AppComponent {
  constructor(private translocoService: TranslocoService) {
    translocoService.load('en').subscribe();
  }
}