En este artículo vamos a ver qué es I18nPluralPipe en Angular 10 y cómo usarlo. El I18nPluralPipe es un mapa que toma un valor de string que se pluraliza según las reglas dadas.
Sintaxis:
{{ value | i18nPlural : map [ : rule]}}
NgModule: el módulo utilizado por I18nPluralPipe es:
- CommonModule
Acercarse:
- Cree una aplicación angular para usar.
- No es necesario realizar ninguna importación para utilizar I18nPluralPipe.
- En app.component.ts define las variables que toman el valor de I18nPluralPipe.
- En app.component.html use la sintaxis anterior con ‘|’ símbolo para hacer el elemento I18nPluralPipe.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Valor de entrada:
- value: toma un valor numérico .
Parámetros:
- pluralMap: Toma un valor de objeto.
- locale: toma un valor de string.
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Referencia: https://angular.io/api/common/I18nPluralPipe