18

Since Angular 9 we can use

$localize`Hello ${name}:name:`

For i18n in typescript code. This still has some limitations as the ng xi18n command does not detect the strings, but if these texts are added manually to the translation file it works.

The $localize function is quite well documented in the JSDoc in the source, however it does not explain how to work with plurals. What I mean is something like this (pseudo-code):

$localize`Hello {${count}, plural, =1 {reader} other {readers}}`

Is this possible with $localize? If yes: How? If no: How does Angular compile such expressions from HTML to TypeScript?

yankee
  • 38,872
  • 15
  • 103
  • 162
  • does this help you ```Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}``` ? Thats in the docs. Pretty similar to what you want – Dave Pastor Mar 11 '20 at 21:14
  • @DavePastor: Yes, I tried that. I changed that in the question now. Nevertheless it is pseudo-code, just to illustrate what I want to achieve. – yankee Mar 11 '20 at 21:15
  • @DavePastor: (concerning the second comment): No, this does not help. This is HTML, not TypeScript. – yankee Mar 11 '20 at 21:16
  • Ok so you want to handle this on the TS side. Got it. – Dave Pastor Mar 11 '20 at 21:20
  • Check this https://blog.ninja-squad.com/2019/12/10/angular-localize/ – Dave Pastor Mar 11 '20 at 21:24

2 Answers2

9

For now, it is not possible to use ICUs with $localize, as discussed in this github issue. From the last comments, it looks like angular team is considering it if it remains lightweight.

Meanwhile, the suggested workaround is to create your own helper method that returns the correct translation based on the count parameter.

    title = $localize `Hi ${this.name}! You have ${
        plural(this.users.length. {
          0: $localize `no users`,
          1: $localize `one user`,
          other: $localize`${this.users.length} users`,
    }.`

    function plural(value, options) {
      // Handle 0, 1, ... cases
      const directResult = options[value];
      if (directResult !== undefined) { return directResult; }
      // handle zero, one, two, few, many
      // ...
      return options.other;
    }
David
  • 33,444
  • 11
  • 80
  • 118
4

I've just read issue https://github.com/angular/angular/issues/35912 and I think that intl-messageformat can do what you need.

See https://github.com/formatjs/formatjs/tree/master/packages/intl-messageformat.

kemsky
  • 14,727
  • 3
  • 32
  • 51