Angular NgPlural Example

By Arvind Rai, January 26, 2022

On this page we will learn Angular NgPlural directive.
1. Angular NgPlural directive adds and removes DOM sub-trees based on a numeric value.
2. The NgPlural directive is exported from CommonModule.
3. The NgPlural directive is used in the same way as NgSwitch directive. To use NgPlural directive, we must provide a container element that binds value using [ngPlural] attribute that accepts only numeric value. Inner elements bind values using [ngPluralCase] attribute.
4. The [ngPluralCase] executes on the basis of ‘exact match’ or ‘category match’.
5. The NgPlural helps in pluralization. Suppose for 0 item we want to write ‘No Item’, for 1 item we want to write ‘1 Item’ and for 2, it is ‘2 Items’.
6. Find the sample code.

<div [ngPlural]="itemNum">
    <ng-template ngPluralCase="=0">There is nothing</ng-template>
    <ng-template ngPluralCase="=1">There is one item</ng-template>
    <ng-template ngPluralCase="other">There are {{itemNum}} items</ng-template>
</div>

For itemNum 0, output is ‘There is nothing’.
For itemNum 1, output is ‘There is one item’.
For itemNum more than 1, for example 5, output is ‘There are 5 items’.

7. The NgPlural matches on the basis of numerical value. For exact match, number is written as "=0" for zero, "=1" for one, "=2" for two, "=3" for three and so on. For other values which do not match, use keyword "other" with ngPluralCase.

Technologies Used

Find the technologies being used in our example.
1. Angular 13.1.0
2. Node.js 12.20.0
3. NPM 8.2.0

Complete Example

app.component.html

<h3>Example-1</h3>
<div [ngPlural]="itemNum">
    <ng-template ngPluralCase="=0">There is nothing</ng-template>
    <ng-template ngPluralCase="=1">There is one item</ng-template>
    <ng-template ngPluralCase="other">There are {{itemNum}} items</ng-template>
</div>
<h3>Example-2</h3>
<div [ngPlural]="personNum">
    <ng-template ngPluralCase="=0">No person</ng-template>
    <ng-template ngPluralCase="=1">One person</ng-template>
    <ng-template ngPluralCase="=2">Two persons</ng-template>
    <ng-template ngPluralCase="other">Many persons</ng-template>
</div>
<h3>Example-3</h3>
<div [ngPlural]="minutes">
    <ng-template ngPluralCase="=0">just now</ng-template>
    <ng-template ngPluralCase="=1">after one minute</ng-template>
    <ng-template ngPluralCase="other">after {{minutes}} minutes</ng-template>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  itemNum = 0;
  personNum = 1;
  minutes = 5;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.