CODEWITHSUNDEEP
angularangular8ngx-translate
Sebastián Rojas
Sebastián Rojas

Reputation: 2891

How to use pluralization in ngx-translate without ngx-translate-messageformat-compiler plugin

I had problems with ngx-translate-messageformat-compiler plugin (json files parse fails after add plural forms). ¿There are any alternatives?

Upvotes: 7

Views: 6303

Answers (2)

Miroslav Jasso
Miroslav Jasso

Reputation: 161

Here is my custom pipe. There is no need to use 2 pipes. This pipe integrates ngx-translate service to get desired translations.

import { ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
    name: 'pluralTranslate',
    pure: false
})
export class PluralTranslatePipe implements PipeTransform {
    private _value: string;

    private suffixes = ['none', 'one', 'few', 'many', 'other'];

    constructor(
        private translateService: TranslateService,
        private _ref: ChangeDetectorRef
    ) {}

    transform(key: string, args: { count: number }): string {
        if (!this._value) {
            const keys = [key, ...this.suffixes.map((s) => key + '_' + s)];
            this.translateService.get(keys, args).subscribe((res) => {
                if (res[key] !== key) {
                    // fallback when no translation is found
                    this._value = res[key];
                } else {
                    let val: string;
                    if (typeof args.count !== 'number' || args.count === 0) {
                        val = res[key + '_' + this.suffixes[0]];
                    } else if (args.count === 1) {
                        val = res[key + '_' + this.suffixes[1]];
                    } else if (args.count > 1 && args.count < 5) {
                        val = res[key + '_' + this.suffixes[2]];
                    } else if (args.count >= 5) {
                        val = res[key + '_' + this.suffixes[3]];
                    }

                    if (!val || val.startsWith(key + '_')) {
                        val = res[key + '_' + this.suffixes[4]];
                    }

                    this._value = val;
                }

                this._ref.markForCheck();
            });
        }

        return this._value;
    }
}

Usage:

'viewsCount' | pluralTranslate: { count: 25 }

Translation file:

"viewsCount_one": "{{count}} zhlédnutí",
"viewsCount_other": "{{count}} zhlédnutí",
"viewsCount_few": "{{count}} zhlédnutí",

Upvotes: 1

Sebasti&#225;n Rojas
Sebasti&#225;n Rojas

Reputation: 2891

I resolved to implement a custom pipe:

Pipe

@Pipe({
  name: 'pluralTranslate',
  pure: false
})
export class PluralTranslatePipe implements PipeTransform {

  transform(key: string, number: number): string {

    return `${key}.${number == 0 ? 'none' : number == 1 ? 'singular' : 'plural'}`;
  }
}

Use

{{ 'daysNumber' | pluralTranslate:2 | translate:{ days: 2} }}

Messages

{
"daysNumber": {
      "none": "",
      "singular": "{{ days }} day",
      "plural": "{{ days }} days"
    },
}

Upvotes: 11

Related Questions