Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cristianbote/angular-translate-json
Angular(latest) translate json
https://github.com/cristianbote/angular-translate-json
angular angular-translate angular2 angular4 javascript json translation typescript
Last synced: 28 days ago
JSON representation
Angular(latest) translate json
- Host: GitHub
- URL: https://github.com/cristianbote/angular-translate-json
- Owner: cristianbote
- License: mit
- Created: 2017-04-13T09:53:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-04-14T08:48:50.000Z (over 7 years ago)
- Last Synced: 2024-10-06T10:25:11.879Z (about 1 month ago)
- Topics: angular, angular-translate, angular2, angular4, javascript, json, translation, typescript
- Language: TypeScript
- Size: 10.7 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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*
[](https://badge.fury.io/js/angular-translate-json) [](https://travis-ci.org/cristianbote/angular-translate-json)
## How to get it
It's up on npm, so you can do:
```bash
npm install --save angular-translate-json
```
## How it works
##### 1. Define the module and configurations
```typescript
// 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
```json
{
"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.
```typescript
@Component({
template: `
`
})
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
```html
```
##### Pipe or filter
```html
{{'COMMON.HELLO' | translate}}
```
##### Using the service
```typescript
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.