Angular 2 Pipe in TypeScript that is used to translate your app into multi-languages. It is suitable for Inoic 2
Just copy the file eigonic-translate.ts
into your project.
Follow these steps to use the module:
- Import the
eiognic
module into your code. - Create languages bundle to have all the translations you have.
- Initialize the
eigonic.Translator
with the languages bandle and the default language. - In the template, use the
eigonic.Translator
pipe namedtranslate
to convert the keywords to their translations.
import { Component } from '@angular/core';
import {LangBundle} from './langBundle';
import {eigonic} from './eigonic-translate';
@Component({
moduleId: module.id,
selector: 'app-root',
template: `
<h1>
{{title}}
</h1>
<ul>
<li>{{'HOME'|translate}}</li>
<li>{{'NOT TRANSLATED'|translate}}</li>
<li>{{'SETTINGS'|translate}}</li>
</ul>
`,
pipes: [eigonic.Translator]
})
export class AppComponent {
title = 'eigonic ng2-translate works!';
constructor() {
eigonic.Translator.init(LangBundle.MSG, 'ar');
}
}
export class LangBundle {
static MSG: any = {
"en": {
HOME: 'Home',
EXPORT: 'Export',
REPORTS: 'Reports',
SETTINGS: 'Settings'
},
"ar":
{
HOME: 'الرئيسية',
REPORTS: 'التقارير',
EXPORT: 'Export',
PROFILE: 'الملف الشخصي',
SETTINGS: 'الإعدادات'
}
};
}
Default language is used in case the current language is not set. It's some sort of fallback language.
To change or switch the current language.
eigonic.Translator.switchLang('en');
It is Apache2 but I personally prefere the WTFPL
Feel free to ask for anything.