is there any way to translate website content in other languages angular code example
Example 1: multilanguage site angular
$ npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';
@NgModule({
...
imports: [
...
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
...
})
export class AppModule { }
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
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);
}
}
{
"demo": {
"title": "Translation demo",
"text": "This is a simple demonstration app for ngx-translate"
}
}
<p [translate]="'demo.text'"></p>
<button (click)="useLanguage('en')">en</button>
<button (click)="useLanguage('de')">de</button>
Example 2: multilanguage site angular
$ npm install --save-dev angular-translate
<script src="path/to/angular-translate.js"></script>
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');
}]);
<h1>{{ 'TITLE' | translate }}</h1>
<p>{{ 'FOO' | translate }}</p>