Skip to content

Commit

Permalink
feat(parser): allow using custom parser
Browse files Browse the repository at this point in the history
  • Loading branch information
ocombe committed Dec 5, 2016
1 parent 62ac73b commit 22f2038
Show file tree
Hide file tree
Showing 63 changed files with 917 additions and 555 deletions.
36 changes: 26 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,11 +121,11 @@ import {TranslateService} from 'ng2-translate';
@Component({
selector: 'app',
template: `
<div>{{ 'HELLO' | translate:{value: param} }}</div>
<div>{{ 'HELLO' | translate:param }}</div>
`
})
export class AppComponent {
param: string = 'world';
param = {value: 'world'};

constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
Expand Down Expand Up @@ -167,11 +167,11 @@ The `TranslateParser` understands nested JSON objects. This means that you can h

You can then access the value by using the dot notation, in this case `HOME.HELLO`.

#### 4. Use the service or the pipe:
#### 4. Use the service, the pipe or the directive:

You can either use the `TranslateService` or the `TranslatePipe` to get your translation values.
You can either use the `TranslateService`, the `TranslatePipe` or the `TranslateDirective` to get your translation values.

With the service, it looks like this.
With the **service**, it looks like this:

```ts
translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
Expand All @@ -180,10 +180,25 @@ translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
});
```

And this is how you do it with the pipe.
This is how you do it with the **pipe**:

```html
<div>{{ 'HELLO' | translate:{value: param} }}</div>
<div>{{ 'HELLO' | translate:param }}</div>
```

And in your component define `param` like this:
```ts
param = {value: 'world'};
```

This is how you use the **directive**:
```html
<div [translate]="'HELLO'" [translateparams]="{param: 'world'}"></div>
```

Or even simpler using the content of your element as a key:
```html
<div translate [translateparams]="{param: 'world'}">HELLO</div>
```

#### 5. Use HTML tags:
Expand All @@ -196,7 +211,7 @@ You can easily use raw HTML tags within your translations.
}
```

To render them, simply use the `innerHTML` attributeon any element.
To render them, simply use the `innerHTML` attribute with the pipe on any element.

```html
<div [innerHTML]="'HELLO' | translate"></div>
Expand Down Expand Up @@ -236,7 +251,7 @@ To render them, simply use the `innerHTML` attributeon any element.
- `setTranslation(lang: string, translations: Object, shouldMerge: boolean = false)`: Manually sets an object of translations for a given language, set `shouldMerge` to true if you want to append the translations instead of replacing them
- `addLangs(langs: Array<string>)`: Add new langs to the list
- `getLangs()`: Returns an array of currently available langs
- `get(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>`: Gets the translated value of a key (or an array of keys)
- `get(key: string|Array<string>, interpolateParams?: Object): Observable<string|Object>`: Gets the translated value of a key (or an array of keys) or the key if the value was not found
- `instant(key: string|Array<string>, interpolateParams?: Object): string|Object`: Gets the instant translated value of a key (or an array of keys). /!\ This method is **synchronous** and the default file loader is asynchronous. You are responsible for knowing when your translations have been loaded and it is safe to use this method. If you are not sure then you should use the `get` method instead.
- `set(key: string, value: string, lang?: string)`: Sets the translated value of a key
- `reloadLang(lang: string): Observable<string|Object>`: Calls resetLang and retrieves the translations object for the current loader
Expand Down Expand Up @@ -310,7 +325,7 @@ export class AppModule { }

### Parser

If you need it for some reason, you can use the `TranslateParser` service.
If you need it for some reason, you can use the `DefaultParser` service.

#### Methods:
- `interpolate(expr: string, params?: any): string`: Interpolates a string to replace parameters.
Expand Down Expand Up @@ -344,6 +359,7 @@ Ionic 2 is still using angular 2 RC4, but ng2-translate uses RC5. You should fix

## Plugins
- [Localize Router](https://github.com/Greentube/localize-router) by @meeroslav: An implementation of routes localization for Angular 2. If you need localized urls (for example /fr/page and /en/page).
- [.po files Loader](https://www.npmjs.com/package/@biesbjerg/ng2-translate-po-loader) by @biesbjerg: Use .po translation files with ng2-translate


## Additional Framework Support
Expand Down
6 changes: 5 additions & 1 deletion config/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ module.exports = function(config) {
frameworks: ['jasmine'],

// list of files to exclude
exclude: [ ],
exclude: [],

/*
* list of files / patterns to load in the browser
Expand Down Expand Up @@ -36,6 +36,10 @@ module.exports = function(config) {

reporters: [ 'mocha', 'coverage', 'remap-coverage' ],

mochaReporter: {
ignoreSkipped: true
},

// web server port
port: 9876,

Expand Down
30 changes: 27 additions & 3 deletions examples/ionic2/.gitignore
Original file line number Diff line number Diff line change
@@ -1,10 +1,34 @@
# Specifies files to intentionally ignore when using Git
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore

*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*

.idea/
.sass-cache/
.tmp/
.versions/
coverage/
dist/
node_modules/
www/build/
tmp/
temp/
hooks/
platforms/
plugins/
*.swp
plugins/android.json
plugins/ios.json
www/
$RECYCLE.BIN/

.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate
39 changes: 0 additions & 39 deletions examples/ionic2/app/app.ts

This file was deleted.

10 changes: 0 additions & 10 deletions examples/ionic2/app/pages/about/about.html

This file was deleted.

2 changes: 0 additions & 2 deletions examples/ionic2/app/pages/about/about.scss

This file was deleted.

10 changes: 0 additions & 10 deletions examples/ionic2/app/pages/about/about.ts

This file was deleted.

2 changes: 0 additions & 2 deletions examples/ionic2/app/pages/contact/contact.scss

This file was deleted.

10 changes: 0 additions & 10 deletions examples/ionic2/app/pages/contact/contact.ts

This file was deleted.

2 changes: 0 additions & 2 deletions examples/ionic2/app/pages/home/home.scss

This file was deleted.

15 changes: 0 additions & 15 deletions examples/ionic2/app/pages/home/home.ts

This file was deleted.

5 changes: 0 additions & 5 deletions examples/ionic2/app/pages/tabs/tabs.html

This file was deleted.

22 changes: 0 additions & 22 deletions examples/ionic2/app/pages/tabs/tabs.ts

This file was deleted.

14 changes: 0 additions & 14 deletions examples/ionic2/app/theme/app.core.scss

This file was deleted.

31 changes: 0 additions & 31 deletions examples/ionic2/app/theme/app.ios.scss

This file was deleted.

31 changes: 0 additions & 31 deletions examples/ionic2/app/theme/app.md.scss

This file was deleted.

35 changes: 0 additions & 35 deletions examples/ionic2/app/theme/app.variables.scss

This file was deleted.

Loading

0 comments on commit 22f2038

Please sign in to comment.