ngx-translate issue with translate instant

Question

I am using ngx-translate in Angular(v6) with lazy-loading approach. I am facing a problem with translate.instant('Title')

Using translate pipe it works fine.( {{'Title' | translate}})

Using translate.instant() method the default language always works, but I am unable to change language via language selector(select component used for switching language) which is in shared module.

I don't want to use this.translate.onLangChange.subscribe each time, is there an alternative to using this method?

Rube

I don't want to use this.translate.onLangChange.subscribe each time. Any other approach? – Rube

Answer 1

Use translate.stream('Title') instead of translate.instant('Title'). It returns an Observable.

See also https://github.com/ngx-translate/core

How it works:

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h2>{{ 'HOME.TITLE' | translate }}</h2>
      <label>
        {{ 'HOME.SELECT' | translate }}
        <select #langSelect (change)="translate.use(langSelect.value)">
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>
      </label>
      <ng-container *ngIf="name$ | async as name">
        <p>Observable {{ name }}</p>
      </ng-container>
    </div>
  `,
})
export class AppComponent {
  public name$: Observable<string>;

  constructor(public translate: TranslateService) {
    translate.addLangs(['en', 'fr']);
    translate.setDefaultLang('en');

    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }

  public ngOnInit(): void {
    this.name$ = this.translate.stream('HOME.TITLE');
  }
}

Here is a link to a stackblitz demo: https://stackblitz.com/edit/github-az4kgy

Eisler

is it possible to use same way like translate.instant('key') ? – Rube

am using shared selector component for switching language > by default instant works as taking 'english' but when i switch to another language translate using pipe works and instant failed. – Rube

The reason is that instant returns a string not an Observable. – Eisler

I have added an example. – Eisler

thanks for putting this much effort. But in my case language selection is happening from shared module. ao instant and stream not listening the changes. – Rube

Strange. In our real world Apps we are also using SharedModules and stream works fine. Maybe you have a DI issue. – Eisler

Answer 2

It always uses the default language. This is the main problem. The solution is:

this.translateService.onLangChange.subscribe((event: TranslationChangeEvent) => {
      this.translateService.setDefaultLang(event.lang);
    });

Villanelle

It didn't work for me , I tried to change the default language but still instant method is showing the language in prior selected language instead of the new one. – Camacho