Tag archive: 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 2 route and route params not visible to all components, use ng-router-state-params service

Error

The Angular 2 router will only update the target component with the url and params. Each component is initialized only when it comes into view. If it already visible when the url changes, it will not be updated by the router. For google, angular 2 components not updating when url changes.

If you’re used to using Angular 1 with ui-router ($state and $stateParams services), using Angular 2 can be frustrating. Instead of using ui-router, we will try to stick with the barebones Angular 2 setup. Angular 2 has its own routing component that has been a huge improvement over the Angular 1 routing component. However, it does not follow the same design as ui-router, which was much easier in my opinion.