Angular 10 I18nPluralPipe API
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:
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 {
colors: any[] = [ 'red' , 'green' , 'blue' ];
gfg:
{[k: string]: string} = {
'=0' : 'No color' ,
'=1' : 'one color' ,
'other' : '# colors'
};
}
|
app.component.html
< 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: any[] = [];
gfg:
{[k: string]: string} = {
'=0' : 'zero languages' ,
'=1' : 'one language' ,
'other' : '# languages'
};
}
|
app.component.html
< div >there are: {{ language.length | i18nPlural: gfg }}</ div >
|
Output:
Reference: https://angular.io/api/common/I18nPluralPipe
Last Updated :
04 Aug, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...