Angular(latest) translate json
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
tests
.gitignore
.travis.yml
LICENSE
README.md
index.ts
karma.conf.js
package.json
tsconfig.json
webpack.config.js

README.md

Angular Translate Json

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

npm version Build Status

How to get it

It's up on npm, so you can do:

npm install --save angular-translate-json

How it works

1. Define the module and configurations
// 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'
        });
    }
}
2. Your translation file

And this is your en.json file

{
  "COMMON": {
    "HELLO": "Hello mate!",
    "HELLO_USER": "Hello {{userName}}!"
  },
  "PAGE_TITLE": "Page title"
}
3. Usage in component

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'        
    }
}
4. More options to use it

You could either use it as a atttribute(directive) or pipe, or simply by calling the service directly.

Directive
<div class="greet" translate="COMMON.HELLO"></div>
Pipe or filter
<div class="greet">{{'COMMON.HELLO' | translate}}</div>
Using the service
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;
            });
    }
    
}

Feedback

Let me know if there's something broken and I'll be more than happy to address it.