Angular-Simple-Translate

Simple translate module for Angular 2 based on a blog post by Jecelyn Yeen (chybie). Features include support for fallback language, nested objects and interpolation.

Installation & Setup

#1 Install package with npm

npm install angular-simple-translate

#2 Import TranslateModule

import { TranslateModule } from 'angular-simple-translate';
...
@NgModule({
    imports: [
        TranslateModule,
        ...
    ],
    ...
})
export class YourModule { }

#3 Create one or more language files

en.ts

export const EN = {
    "app": {
        "title": "Angular-Simple-Translate Beispiel",
        "greet": "Hello, %0 %1"
    }
};

de.ts

export const DE = {
    "app": {
        "title": "Angular-Simple-Translate Beispiel",
        "greet": "Hallo, %0 %1"
    }
};

#4 Export translations as dictionary

translations.ts

import { EN } from './en';
import { DE } from './de';
 
export const TRANSLATIONS = {
    "en" : EN,
    "de" : DE
}

#5 Configure TranslateService in your component

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 
  private readonly _translateService: TranslateService;
 
  constructor(translateService: TranslateService) {
    this._translateService = translateService;
  }
  
  ngOnInit() {
    this._translateService.init(TRANSLATIONS, navigator.language, 'en', true);
  }
}

Usage

Usage in html template

<h1>
  {{ 'app.title' | translate }}
</h1>
{{ 'app.greet' | translate:['John', 'Doe'] }}

Usage in typescript

var title = this._translateService.instant('app.title');
var greeting = this._translateService.instant('app.greet', ['John', 'Doe']);

Run Demo App

You can try out the Datepicker in the demo app built with Angular-CLI.

#1 To start the demo app clone or download the repo.

#2 Install the latest version of Angular-CLI

npm install -g angular-cli@latest

#3 Install npm packages

npm install

#4 Run the app

ng serve

#5 Open the app

http://localhost:4200/

License

MIT