Angular10 NgPluralCase Directive Last Updated : 29 Jul, 2021 Comments Improve Suggest changes Like Article Like 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.tsin 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 Comment More infoAdvertise with us Next Article AngularJS ng-value Directive T taran910 Follow Improve Article Tags : Web Technologies AngularJS Angular10 Similar Reads Angular 10 NgPlural Directive 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: [NgPlu 1 min read Angular10 NgSwitchCase Directive In this article, we are going to see what is NgSwitchCase in Angular 10 and how to use it. The NgSwitchCase in Angular10 is used to create a view that will be added or removed from the parent NgSwitch when the given expression matches the expression Syntax: <li *NgSwitchCase='condition'></l 1 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read Angular10 NgSwitch Directive In this article, we are going to see what is NgSwitch in Angular 10 and how to use it. The NgSwitch in Angular10 is used to specify the condition to show or hide the child elements. Syntax: <li *NgSwitch='condition'></li> NgModule: Module used by NgSwitch is: CommonModule  Selectors: [N 1 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read Like