This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

NgPlural

npm Package @angular/common
Module import { NgPlural } from '@angular/common';
Source common/src/directives/ng_plural.ts
NgModule CommonModule

Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.

Overview

      
      @Directive({ selector: '[ngPlural]' })
class NgPlural {
  set ngPlural: number
  addCase(value: string, switchView: SwitchView): void
}

How To Use

      
      <some-element [ngPlural]="value">
  <ng-template ngPluralCase="=0">there is nothing</ng-template>
  <ng-template ngPluralCase="=1">there is one</ng-template>
  <ng-template ngPluralCase="few">there are a few</ng-template>
</some-element>

Selectors

      
      [ngPlural]

Inputs

ngPlural bound to NgPlural.ngPlural

Description

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 a container element that sets the [ngPlural] attribute to a switch expression. Inner elements with a [ngPluralCase] 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 for the defined locale.

See http://cldr.unicode.org/index/cldr-spec/plural-rules

Constructor

      
      constructor(_localization: NgLocalization)

Members

      
      set ngPlural: number
    
      
      addCase(value: string, switchView: SwitchView): void