UNPKG

ngx-translate-parser-plural-select

Version:

ngx-translate parser that supports pluralization and select (a la Angular's i18n module)

103 lines (86 loc) 3.42 kB
# Template parser for `ngx-translate` ## Installation Just `yarn install ngx-translate-parser-plural-select` and use when adding `ngx-translate` to the `imports` section in your `@NgModule`: ```typescript @NgModule({ ... imports: [ ... TranslateModule.forRoot({ parser: { provide: TranslateParser, useClass: TranslateICUParser } }) ] }) ``` ## Usage Now you can use `plural` and `select` in your translations. ```json { "HERO": "The hero is {gender, select, m {male} f {female}}", "WOLVES": "The hero saw {wolves, plural, =0 {no wolf} =1 {a wolf} =2 {two wolves} other {a pack of wolves}}", "CROWS": "You could see {crows.length, plural, =1 {a crow} few {a few crows} many {a murder of crows}}" } ``` And even more complex usages: ```json { "COMPLEX": "{count, plural, =0 { nadie } =1 {{gender, select, m {un hombre} f {una mujer}}} other {{{heroes.length}} {gender, select, m {hombres} f {mujeres}}}}" } ``` ## Notes Plural supports (first rule matching the value will be applied): * `=value` — matches exact value (e.g. `=0`, `=1`) * `zero`, `one`, `two`... — matches values ending in 0, 1, 2, ... that are not between 10 and 19 (inclusive) * `few` — matches 2, 3, and 4 * `many` — matches any value greater than 4 and any non-integer value * `other` — matches any value ## Custom pipes [`v1.1+`] If you want to define your own pipes to use as `{variable, *pipe_name*, *pipe_options*}`, you can use a factory to create the **`TranslateICUCustomParser`**, the class taking a parameter consisting of a dictionary of custom pipes. ##### Example ```typescript @NgModule({ ... imports: [ ... TranslateModule.forRoot({ parser: { provide: TranslateParser, useFactory: createParserFactory } }) ] }) ... const CUSTOM_PIPES = { '?': (value: any, parameters: string[], options: string[]) => { parameters = parameters.map(option => option.trim()).slice(0, parameters.length - 1); const mapper: {[option: string]: string} = parameters.reduce((map, parameter, index) => ({...map, [parameter.trim()]: options[index]}), {}); console.dir({value, parameters, options, mapper}, {depth: 10}); return mapper[value] == null ? mapper[''] : mapper[':']; } }; export function createParserFactory() { return new TranslateICUCustomParser(CUSTOM_PIPES); } ``` This allows you to use the `?` pipe: `Hello, {name, ?, {{name}} : {stranger}}!` ##### Pipe function parameters The parameters given to the pipe function are: * the value of the variable the pipe is being applied on * an array of the strings between the options * an array of the options, where the application of the pipe is on a string of the format {*value*, *pipe_name*, *parameter0* {*option0*} *parameter1* {*option1*} ... *parameterN* {*optionN*} *parameterN+1*} ###### Concretely: During the parsing of the string `'Hello, {name, myPipe, J {Johnny} K {Kenny} L {Lenny} M {Maurice}}'`, the pipe defined in the dictionary passed to the `TranslateICUParser` class constructor under the `myPipe` key will be called with parameters: 1. the value of the `name` property of the object passed to the `ngx-translate` function/directive 2. `[' J ', ' K ', ' L ', ' M ', '']` 3. `['Johnny', 'Kenny', 'Lenny', 'Maurice']`