Open In App

Angular10 NgPluralCase Directive

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In this article, we are going to see what is NgPluralCase in Angular 10 and how to use it.

The NgPluralCase in Angular10 is used to create a view that will be added or removed from the parent NgPlural when the given expression matches the plural expression. We can use the values to make the output plural or singular based on the conditions.

Syntax:

<li *NgPluralCase='condition'></li>

NgModule: Module used by NgPluralCase is:

  • CommonModule

 

Selectors:

  • [NgPluralCase]

Approach: 

  • Create the Angular app to be used.
  • There is no need for any import for the NgPluralCase to be used.
  • Define a variable in app.component.ts
  • in app.component.html use ngPlural with ngPluralCase directive in the element with conditions to be checked.
  • Serve the angular app using ng serve to see the output.

Example 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>


Output:

Geek

Example 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>


Output:

5 Cars

Reference: https://angular.io/api/common/NgPluralCase



Last Updated : 29 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads