9

We are using Angular 2.0 in our Application. In that application we want to give multilingual support.We know using angular 1.0 how to implement. but don't know how to use in 2.0.

Popat Shirsath
  • 141
  • 1
  • 1
  • 7

2 Answers2

28

I can recommend ngx-translate library, it's very easy to integrate and use.

1. Install via npm

npm install @ngx-translate/core --save

2. Add TranslateModule in app.module.ts imports

import {TranslateModule} from '@ngx-translate/core';

@NgModule({
   declarations: [...],
   imports     : [TranslateModule.forRoot(), ...],
   exports      : [...],
   providers   : [...],
   bootstrap   : [AppComponent]
})

export class AppModule {}

3. app.components.ts

import {Component} from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

@Component({
  selector   : 'app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.addLangs(['en', 'hy']);
    translate.setDefaultLang('en');
    translate.use('en');
  }
  changeLang(lang: string) {
    this.translate.use(lang);
  }
}

4. app.component.html

<nav>
  <a [routerLink]="['/']">    
    {{ "home" | translate }}
  </a>
  |
  <a [routerLink]="['/about']">
    {{ "about" | translate }}
  </a>
  |
  <a [routerLink]="['/contact']">
    {{ "contact" | translate }}
  </a>
</nav>
<div class="lang-bar">
  <a (click)="changeLang('en')">EN</a>
  <a (click)="changeLang('hy')">ՀՅ</a>
</div>

5. Create i18n folder with translation files

en.json

{
    "home" : "Home",
    "about" : "About",
    "contact" : "Contact"
}

hy.json

{
    "home" : "Գլխավոր",
    "about" : "Մեր մասին",
    "contact" : "Հետադարձ կապ"
}
styopdev
  • 2,604
  • 4
  • 34
  • 55
  • 3. app.components.ts Instead of importing TranslateService from 'ng2-translate' import it from @ngx-translate/core – Jnana Jul 13 '17 at 06:58
  • Do you only need to add it in the app component or on every component that uses it? Because the app component is the start of everything -> so in my other htmls I could assume it is imported? – fangio Jul 28 '17 at 11:49
  • @fangio You have to import ```TranslateService``` in the case you want to use it, eg. you want to change current language, detect language change or get translation. If you want just use translate pipe like this ```{{ "contact" | translate }}``` you dont need to import anything from ngx-translate in your components. – styopdev Jul 28 '17 at 13:24
  • @styopdev I followed your steps but I don't get the translation – fangio Aug 07 '17 at 07:23
  • @fangio Have a look on repository where I have implemented this https://github.com/styopdev/ng2-boilerplate-nasa-browser, just keep in mind that ng2-translate has been renamed to ngx-translate core – styopdev Aug 07 '17 at 07:48
  • @styopdev still not working I have "TEST":"little test" in my en.json but it shows TEST – fangio Aug 07 '17 at 07:58
  • @styopdev It is a really big project, but I added a new question on stackoverflow with a bit more info: https://stackoverflow.com/questions/45542208/angular-4-ngx-translate-pipe-not-working – fangio Aug 07 '17 at 08:14
  • 3
    @styopdev how does angular know where to find the i18n folder? – fangio Aug 07 '17 at 08:54
1

i18n in Angular2 is still work in progress and seems not yet to be usable.

See also https://github.com/angular/i18n/issues/28

and this similar question Angular2 i18n at this point?

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • ,Is it available now? Is there any guidelines to do that. – peaceUser Dec 15 '16 at 05:02
  • how is the collocation taken care in this. looks like we have to generate the .xlf file and render it. another define in a kind of JSON and load it. Is these the way to do? What will you prefer if dynamically data arriving has to be translated ! – peaceUser Dec 16 '16 at 14:26
  • Sorry, I don't know. I haven't used Angulars i18n. AFAIR there is an open issue to support translation in code. – Günter Zöchbauer Dec 17 '16 at 18:00