Translations module for latest version of angular. It's built to support latest angular version, with a friendly to use api.
Inspired by https://github.com/angular-translate/angular-translate
It's up on npm, so you can do:
npm install --save angular-translate-json// Imports
import { AngularTranslateJsonModule, TranslateService } from 'angular-translate-json';
// Import it
@NgModule({
imports: [
AngularTranslateJsonModule.forRoot(
// You can either define the settings here
{
locale: 'en',
path: 'my/path/to/translations'
}
),
]
})
class MyAngularModule {
constructor( private translateService: TranslateService ) {
// Or here
translateService.setConfig({
locale: 'en',
path: 'my/path/to/translations'
});
}
}And this is your en.json file
{
"COMMON": {
"HELLO": "Hello mate!",
"HELLO_USER": "Hello {{userName}}!"
},
"PAGE_TITLE": "Page title"
}Now, we're ready to use inside our components.
@Component({
template: `
<div class="page">
<div class="title" translate="PAGE_TITLE"></div>
<div class="greet" translate="COMMON.HELLO"></div>
<div class="greet" translate="COMMON.HELLO_USER" [translateValues]="userData"></div>
</div>
`
})
class MyComponent {
userData = {
userName: 'johnsnow'
}
}You could either use it as a atttribute(directive) or pipe, or simply by calling the service directly.
<div class="greet" translate="COMMON.HELLO"></div><div class="greet">{{'COMMON.HELLO' | translate}}</div>import { TranslateService } from 'angular-translate-json';
@Component({
template: `{{myNameIs}} {{name}}`
})
class NameBadgeComponent {
myNameIs = '';
name = 'John Snow';
constructor( private translateService: TranslateService ) {
translateService.getTranslation('COMMON.HELLO')
.subscribe(res => {
this.myNameIs = res;
});
}
}Let me know if there's something broken and I'll be more than happy to address it.