I'm following this tutorial (https://alligator.io/angular/ngx-translate/) about translations in Angular. When I call the translation in HTML file nothing happen and I saw an empty line:
<label translate='demo.title'></label>
But in my component.ts, if I import the import {TranslateService} from '@ngx-translate/core'; I can get the right translation using:
title:string;
constructor(private translate: TranslateService) { }
ngOnInit() {
this.translate.get(['demo.title'])
.subscribe(translations => {
this.title = translations['demo.title'];
console.log(this.title ); // the right translations appears in console
});
}
app.module.ts
// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule,
IndexModule,
NoPageModule,
HttpClientModule,
// ngx-translate and the loader module
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
RouterModule.forRoot(routes, { useHash: true }),
],
providers: [AuthService, AuthGuard],
bootstrap: [AppComponent],
schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
pt.json
{
"demo": {
"title": "oi",
"text": "This is a simple demonstration app for ngx-translate"
}
}
Related to this topic, how can I know with Angular the browser language?
Best regards