En este artículo vamos a ver qué es NgPlural en Angular 10 y cómo usarlo.
NgPlural
Sintaxis:
<li *NgPlural='condition'></li>
NgModule: El módulo utilizado por NgPlural es:
- CommonModule
Selectores:
- [NgPlural]
Acercarse:
- Cree una aplicación Angular que se utilizará.
- No hay necesidad de ninguna importación para que se use NgPlural.
- Definir una variable en app.component.ts
- En app.component.html, use ngPlural con la directiva de caso ngPlural en el elemento con las condiciones a verificar.
- Sirva la aplicación angular usando ng serve para ver el resultado.
Ejemplo:
app.component.ts
import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformWorkerApp } from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
val = 1;
}
app.component.html
<some-element [ngPlural]="val"> <ng-template ngPluralCase="=1">Geek</ng-template> <ng-template ngPluralCase="=2">Geeks</ng-template> </some-element>
Producción:
Geek
Referencia: https://angular.io/api/common/NgPlural