Open abu18saud opened 2 years ago
import { HttpClient } from '@angular/common/http'; import {TranslateHttpLoader} from '@ngx-translate/http-loader'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }
imports: [ BrowserModule, AppRoutingModule, HttpClientModule, TranslateModule.forRoot({ defaultLanguage: 'ar', loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }) ],
import { Component, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate/core';
@Component({ selector: 'app-lang', templateUrl: './lang.component.html', styleUrls: ['./lang.component.scss'] }) export class LangComponent implements OnInit { public langName = '';
constructor(public translateService: TranslateService) { }
ngOnInit(): void {
this.langName = this.getLangName(this.translateService.getDefaultLang());
}
public changeLang(lang:string){
this.translateService.use(lang);
this.langName = this.getLangName(lang);
}
public getLangName(lang:string){ if(lang == 'en'){ return 'English'; } else if(lang == 'de'){ return 'German'; } else if(lang == 'fr'){ return 'French'; } else if(lang == 'ru'){ return 'Russian'; } else if(lang == 'tr'){ return 'Turkish'; } else{ return 'English'; } }
}
`
<div class="content">
<h1>{{'HOME' | translate}}</h1>
</div>
title = 'angular-internationalization';
constructor(public translateService: TranslateService) { }
public selectLanguage(event: any) { // TODO this.translateService.use(event.target.value); }
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save