In this article, we are going to see what is I18nPluralPipe in Angular 10 and how to use it. The I18nPluralPipe is a map that takes a string value that pluralizes according to given rules.
Syntax:
{{ value | i18nPlural : map [ : rule]}}
NgModule: Module used by I18nPluralPipe is:
- CommonModule
Approach:
- Create an angular app to be used.
- There is no need for any import for the I18nPluralPipe to be used.
- In app.component.ts define the variables that takes the I18nPluralPipe value.
- In app.component.html use the above syntax with ‘|’ symbol to make I18nPluralPipe element.
- Serve the angular app using ng serve to see the output.
Input value:
- value: it takes a number value.
Parameters:
- pluralMap: It takes an object value.
- locale: It takes a string value.
Example 1:
app.component.ts
import { Component, OnInit } from '@angular/core' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html'
}) export class AppComponent { // Color array
colors: any[] = [ 'red' , 'green' , 'blue' ];
// Map from which I18nPluralPipe takes the value
gfg:
{[k: string]: string} = {
'=0' : 'No color' ,
'=1' : 'one color' ,
'other' : '# colors'
};
} |
app.component.html
<!-- In Below Code I18nPluralPipe is used --> < div >there are: {{ colors.length | i18nPlural: gfg }}</ div >
|
Output:
Example 2:
app.component.ts
import { Component } from '@angular/core' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html'
}) export class AppComponent { // Language array
language: any[] = [];
// Map from which I18nPluralPipe
// takes the value
gfg:
{[k: string]: string} = {
'=0' : 'zero languages' ,
'=1' : 'one language' ,
'other' : '# languages'
};
} |
app.component.html
<!-- In Below Code I18nPluralPipe is used --> < div >there are: {{ language.length | i18nPlural: gfg }}</ div >
|
Output:
Reference: https://angular.io/api/common/I18nPluralPipe