ng-translate-little-helper v0.0.10
ng-translate-little-helper
ng-translate-little-helper is a companion component to the ng2-translate library. It assists you (or an editor) in composing a ng2-translate file (the json file holding all translations).
While navigating an application, each time you visit a new page, the companion lists all translation keys (and values, if any) of that page. It allows you to specify and save new translations. These new translations are immediately reflected in the application. When clicking the download button, the new translations are merged with the existing ng2-translate file.
Here's a demo.
Installation
To install this library, run:
$ npm install ng-translate-little-helper --save
Consuming your library
From your Angular AppModule
:
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {HttpModule, Http} from "@angular/http";
import {AppComponent} from "./app.component";
import {RouterModule} from "@angular/router";
import {TranslateModule} from "ng2-translate";
import {routes} from "./app.routes";
// Import your library
import {NgTranslateLittleHelperModule} from "ng-translate-little-helper";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes),
TranslateModule.forRoot(),
// Specify your library as an import
NgTranslateLittleHelperModule.forRoot({nesting : 2})
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Once your library is imported, you can include it in your angular templates like so:
<!-- You can now use your library component in app.component.html -->
<h1>
{{title}}
</h1>
<translate-little-helper></translate-little-helper>
Configuring your library
NgTranslateLittleHelperModule.forRoot()
takes a TranslateLittleHelperConfig
parameter. You can configure
the following:
- disabled: a boolean specifying whether the companion is disabled or not. Might be handy if you want to disable the companion, e.g. in production mode;
nesting: when exporting the translate keys, one can define the number of nesting. Take e.g. the key
a.nested.key
. With a nesting level of2
, this will become:{ "a" : { "nested.key" : "val" } }
A nesting level of
1
results in:{ "a.nested.key" : "val" }
The default value is 1;
Methods
You can listen for when the user saves his translations through the TranslateLittleHelperService.onSave.subscribe
method.
constructor(private helper:TranslateLittleHelperService) {
}
ngOnInit(): void {
this.helper.onSave.subscribe(({translations, lang}) => {
console.log('saved!!!!');
});
}
In case the TranslateLittleHelperService
was configured with {disabled : true}
, you can always enable it
via its enable()
method.
License
MIT © david-bulte