Skip to content
Related Articles

Related Articles

Angular 10 I18nPluralPipe API

Improve Article
Save Article
Like Article
  • 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!