ngPlural directive
This is the documentation for Angular 8.
You can switch to the latest version Angular 10.
You can switch to the latest version Angular 10.
Adds / removes DOM sub-trees based on a numeric value. Tailored for pluralization.
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 CLDR — Plural Rules.
Source
<input [(ngModel)]="value" name="value">
<div [ngPlural]="value">
<ng-template ngPluralCase="=0">No messages</ng-template>
<ng-template ngPluralCase="=1">One message</ng-template>
<ng-template ngPluralCase="other">{{ value }} messages</ng-template>
</div>
export class AppComponent {
value = 1;
}
Result
One message