CODEWITHSUNDEEP
angularmultilingual
Popat Shirsath
Popat Shirsath

Reputation: 141

Angular 2 - Multilingual Support

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.

Upvotes: 9

Views: 23183

Answers (2)

styopdev
styopdev

Reputation: 2664

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" : "Հետադարձ կապ"
}

Upvotes: 28

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657761

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?

Upvotes: 1

Related Questions