NgPluralCase

ngPlural is an i18n directive that displays DOM sub-trees that match the switch expression value, or failing that, DOM sub-trees that match the switch expression's pluralization category.

To use this directive, you must provide an extension of NgLocalization that maps values to category names. You then define a container element that sets the [ngPlural] attribute to a switch expression. - Inner elements defined with an [ngPluralCase] attribute will display based on their expression. - If [ngPluralCase] is set to a value starting with =, it will only display if the value matches the switch expression exactly. - Otherwise, the view will be treated as a "category match", and will only display if exact value matches aren't found and the value maps to its category using the getPluralCategory function provided.

If no matching views are found for a switch expression, inner elements marked [ngPluralCase]="other" will be displayed.

class MyLocalization extends NgLocalization {
   getPluralCategory(value: any) {
      if(value < 5) {
         return 'few';
      }
   }
}
 
@Component(
   selector: 'app',
   providers: const [provide(NgLocalization, {useClass: MyLocalization})]
)
@View(
  template: '''
    <p>Value = {{value}}</p>
    <button (click)="inc()">Increment</button>
 
    <div [ngPlural]="value">
      <template ngPluralCase="=0">there is nothing</template>
      <template ngPluralCase="=1">there is one</template>
      <template ngPluralCase="few">there are a few</template>
      <template ngPluralCase="other">there is some number</template>
    </div>
  ''',
  directives: const [NgPlural, NgPluralCase]
)
class App {
  dynamic value = 'init';
 
  void inc() {
    value = value === 'init' ? 0 : value + 1;
  }
}