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'
},
};