i18nPlural pipe with number pipe – Angular

Maybe this is super obvious and not an issue which is why I couldn’t find this anywhere online. As you can see, using the number pipe before the plural pipe works fine.

// app.component.html
<p>{{ 0 | number | i18nPlural:plurals.result }}</p>     No results
<p>{{ 1 | number | i18nPlural:plurals.result }}</p>     One result
<p>{{ 100 | number | i18nPlural:plurals.result }}</p>   100 results
<p>{{ 1000 | number | i18nPlural:plurals.result }}</p>  1,000 results

// number wasn't formatted
<p>{{ 1000 | i18nPlural:plurals.result }}</p>           1000 results

// app.component.ts
export class AppComponent  {
  name = 'Angular 5';
  plurals = {
    result: {
      '=0':  'No results',
      '=1': 'One result',
      other: '# results'
    },
  };
}

Made a Stackblitz here: https://stackblitz.com/edit/number-pipe-locale-example-fng23y?file=app/app.component.html

Wrong Stuff

The issue was I couldn’t figure out how to get the number formatted with commas. Here’s some things I tried to help google index it.

{{  # | number }}
{{ resultTotal | i18nPlural:plurals.result }}
{{ resultTotal | i18nPlural:plurals.result | number }}
{{ resultTotal }} {{ resultTotal | i18nPlural:plurals.result }}

plurals = {
    result: {
      '=0':  'No results',
      '=1': 'One result',
      other: '{{count}} results',
      other: '{{# | number}} results',
      other: '# | number results'
    },
};
Share this:

Leave a comment