Angular

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

Angular pipe with parameters – ngx-translate in title tag

The Issue

Using ngx-translate inside the title tag with parameters. This can be applied to any angular pipe that takes parameters. The format is weird, so I’m leaving it here for future reference.

<i class="fa fa-pencil" aria-hidden="true"
           title="{{'Edit x viability filter' | translate:{value: name} }}"
           (click)="openViabilityFilter(viabilityFilter)"></i>

This is an easier way of doing the translations than the ngx-translate docs suggest, shown below:

This is how you do it with the pipe:

<div>{{ 'HELLO' | translate:param }}</div>

And in your component define param like this:

param = {value: 'world'};