Open In App

Angular 10 I18nPluralPipe API

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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://v17.angular.io/api/common/I18nPluralPipe


T

taran910
Improve
Article Tags :

Explore

Lightbox