تثبيت خدمة الترجمة في الـ Angular

[abu18saud]

npm install @ngx-translate/core --save

npm install @ngx-translate/http-loader --save

[abu18saud]

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] } }) ],

[abu18saud]

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'; } }

}

[abu18saud]

https://youtu.be/jCvsy4XSOEQ

[abu18saud]

عربي English

{{'HOME' | translate}}

[abu18saud]

`

عربي English

<div class="content">
    <h1>{{'HOME' | translate}}</h1>
</div>

`

[abu18saud]

title = 'angular-internationalization';

constructor(public translateService: TranslateService) { }

public selectLanguage(event: any) { // TODO this.translateService.use(event.target.value); }