Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

NgPlural

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

See more...

Exported from

Selectors

Properties

Property Description
@Input()
ngPlural: number
Write-Only

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

      
      <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>
    

Methods

      
      addCase(value: string, switchView: SwitchView): void
    
Parameters
value string
switchView SwitchView
Returns

void