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:
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'
};
}
<!-- In Below Code I18nPluralPipe is used -->
<div>there are: {{ colors.length | i18nPlural: gfg }}</div>
Output:
Example 2:
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'
};
}
<!-- In Below Code I18nPluralPipe is used -->
<div>there are: {{ language.length | i18nPlural: gfg }}</div>
Output:
