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