ng-pluralize in modern Angular
ng-pluralize has two successors: ICU plural expressions in the template, which work with Angular's i18n, and the I18nPluralPipe for simple cases.
Before · AngularJS
<ng-pluralize count="vm.messages.length"
when="{'0': 'No messages',
'one': '1 message',
'other': '{} messages'}">
</ng-pluralize>After · Angular<!-- ICU expression, extracted for translation by the i18n attribute -->
<span i18n>
{count(), plural, =0 {No messages} =1 {1 message} other {{{ count() }} messages}}
</span>
<!-- or I18nPluralPipe, with the mapping in the component -->
<span>{{ count() | i18nPlural: messageMap }}</span>
messageMap = { '=0': 'No messages', '=1': '1 message', other: '# messages' };What changes
- Exact matches are written =0 and =1; categories such as one, few, many and other follow the rules of the active locale.
- The {} placeholder becomes # in the pipe mapping, or a normal interpolation inside an ICU case.
- The offset attribute has no direct equivalent; calculate the adjusted number in the component.
Migration tip. If the app has more than one language, prefer ICU expressions. Plural rules differ between languages, and an ICU message lets each translation define its own cases.
Related
- ngTouch (ng-swipe-left / ng-swipe-right)
- $resource .$promise and $resolved
- $http cache / $cacheFactory
- $interpolateProvider / $interpolate
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn