Open In App

Angular 10 NgPlural Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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

The NgPlural in Angular10 is used to Add or remove DOM sub-trees based on a numeric value.

Syntax:

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

NgModule: Module used by NgPlural is:

  • CommonModule

 

Selectors:

  • [NgPlural]

Approach: 

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

Example:

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>


Output:

Geek

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


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