I have created the application with the pages like dashboard and settings. Now I want to change the language throughout the application when I change the language option. But it is working only for the settings page where I have called the language change function not in dashboard page.
Experts inputs please?
settings.ts
import { Component, OnInit } from '@angular/core';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core'
@Component({
selector: 'app-settings',
templateUrl: './settings.component.html',
styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {
public lang: string;
constructor(private translate: TranslateService) {
this.lang = "en";
translate.setDefaultLang('en');
let last = localStorage.getItem("selectedLang");
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use(last);
}
changeLanguage(value: string) {
console.log(value);
if (value == "German") {
this.lang = "de";
localStorage.setItem("selectedLang", this.lang);
this.translate.use(this.lang);
}
if (value == "English") {
this.lang = "en";
localStorage.setItem("selectedLang", this.lang);
this.translate.use(this.lang);
}
}
}
settings html
<div class="form-group">
<label [innerHTML]="'description' | translate"></label>
<p>Language for user interface and display data.</p>
</div>
dashboard html
<div class="card card-small dash-warning">
<h2>
<i class="cis2-fa cis2-fa-dg-logo"></i>
</h2>
<span class="m-t-20" [innerHTML]="'dash.doc_gen_status' | translate"></span>
<h2 class="upper-case bold" [innerHTML]="'dash.doc_gen_unavail' | translate">Unavailable</h2>
</div>
app.module.ts
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [BrowserModule, BrowserAnimationsModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule, ToasterModule.forRoot(), NgDynamicBreadcrumbModule, TooltipModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})],
declarations: [AppComponent, DashboardComponent, HeaderComponent, SidebarComponent, LoginComponent],
providers: [LoggerService, DataService, Title, ToasterService, { provide: APP_BASE_HREF, useValue: '/' }, Resolver, httpInterceptorProviders],
bootstrap: [AppComponent]
})
app.routing.module.ts
const routes: Routes = [
{
path: routePaths.login,
component: LoginComponent
},
{
path: routePaths.dashboard,
component: DashboardComponent,
},
{
path: routePaths.userProfile,
loadChildren: './modules/userProfile/user-profile.module#UserProfileModule'
},
{ path: '**', redirectTo: routePaths.login, pathMatch: 'full' }
];
user.profile.module.ts
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
AgGridModule.withComponents([]), TooltipModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})],
declarations: [SettingsComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class UserProfileModule { }
It's because you import TranslateModule.forRoot
in multiple places which makes lazy loaded modules have their own instances of TranslateService
.
What you should do is to keep TranslateModule.forRoot
in AppModule
only and any other module who needs TranslatePipe
will just import TranslateModule
.
TranslateService
will be globally available to all modules and it will be singleton. So, change UserProfileModule
to this
@NgModule({
imports: [CommonModule, ReactiveFormsModule, FormsModule, UserProfileRoutingModule,
AgGridModule.withComponents([]), TooltipModule,
TranslateModule],
declarations: [SettingsComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
})
export class UserProfileModule { }