Angular NgPlural Example
January 26, 2022
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>
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>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
itemNum = 0;
personNum = 1;
minutes = 5;
}
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.
