Angular 10 I18nPluralPipe API

Last Updated : 04 Aug, 2021

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

Angular 10 DatePipe API

taran910

Improve

Article Tags :

Angular 10 I18nPluralPipe API

Similar Reads

Thank You!

What kind of Experience do you want to share?