multi language website angular 6
$npm install ngx-i18nsupport -smulti language website angular 6
$npm install ngx-i18nsupport -smultilanguage site angular
//Install ngx-translate
$ npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save
//In your app.module.ts:
// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
@NgModule({
...
imports: [
...
// ngx-translate and the loader module
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
...
})
export class AppModule { }
// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
//In the app.component.ts
import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
useLanguage(language: string) {
this.translate.use(language);
}
}
//create the JSON file for the English translation: assets/i18n/en.json.
{
"demo": {
"title": "Translation demo",
"text": "This is a simple demonstration app for ngx-translate"
}
}
//do the same with another language (for example german)
//In the app.component.html
<p [translate]="'demo.text'"></p>
<button (click)="useLanguage('en')">en</button>
<button (click)="useLanguage('de')">de</button>multilanguage site angular
//Installing:
//Terminal
$ npm install --save-dev angular-translate
//Embed in the html doc
<script src="path/to/angular-translate.js"></script>
//In the component.ts
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('en', {
'TITLE': 'Hello',
'FOO': 'This is a paragraph'
});
$translateProvider.translations('de', {
'TITLE': 'Hallo',
'FOO': 'Dies ist ein Absatz'
});
$translateProvider.preferredLanguage('en');
}]);
//In the component.html
<h1>{{ 'TITLE' | translate }}</h1>
<p>{{ 'FOO' | translate }}</p>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
