Translations with many components using ng2-translate

Question

Hi I have a problem with translations, I'm using ng2-translate and this theme: SB Admin Bootstrap 4 Angular 4

I have an header with a language select dropdown menù, if I change language only my header component is translated but not the entire page (I have correctly configured pipes in all my project and imported translatemodule in the correct module)

My component.html is:

<app-header></app-header>
<app-sidebar></app-sidebar>
<section class="main-container">
<router-outlet></router-outlet>
</section>

In my header I have this dropdown:

<div>
 <label>
  {{ 'HOME.SELECT' | translate }} 
  <select #langSelect (change)="translate.use(langSelect.value);setLang()">
   <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
  </select>
 </label>
</div>

What is the way to change language at entire page if it's formed by many other components?

score 0 · Answer 1 · answered Jul 04 '17 at 11:52

You need to import the ng2-translate module in all your modules where you are using translate pipe. it better to install the next version ngx-translate/core.

For ngx-translate/core need to import TranslateModule in all your sub-modules

...
import {TranslateModule} from '@ngx-translate/core';
...

@NgModule({
    imports: [
        ...,
        TranslateModule //or TranslateModule.forChild()
    ]

Translations with many components using ng2-translate

1 Answers1