Angular10 NgSwitch Directive

Last Updated : 21 Jul, 2021

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:

[NgSwitch]

Directives:

NgSwitchCase

Approach:

Create the angular app to be used
There is no need for any import for the NgSwitch to be used
define a variable in app.component.ts
in app.component.html use NgSwitch with NgSwitchCase 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  { 
  num = 2; 
}

app.component.html

<div [ngSwitch]="num"> 
  <div *ngSwitchCase="'1'">One</div> 
  <div *ngSwitchCase="'2'">Two</div> 
  <div *ngSwitchCase="'3'">Three</div> 
  <div *ngSwitchCase="'4'">Four</div> 
  <div *ngSwitchCase="'5'">Five</div> 
</div>

Output:

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

taran910

News

Improve

Angular10 NgSwitchCase Directive

Similar Reads

Angular10 NgPluralCase Directive

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:

Angular10 NgFor Directive

In this article, we are going to see what is NgFor in Angular 10 and how to use it. NgFor is used as a structural directive that renders each element for the given collection each element can be displayed on the page. Syntax: <li *ngFor='condition'></li> NgModule: Module used by NgForOf is: CommonModule Selectors: [ngFor] Approach: Crea

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'></li> NgModule: Module used by NgSwitchCase is: Co

Angular10 getLocaleWeekEndRange() Function

In this article, we are going to see what is getLocaleWeekEndRange in Angular 10 and how to use it. The getLocaleWeekEndRange is used to get the range of week days for the given locale. Syntax: getLocaleWeekEndRange(locale : string): [WeakDay, WeakDay] NgModule: Module used by getLocaleWeekEndRange is: CommonModule Approach: Create an angular app.I

Angular10 getLocaleFirstDayOfWeek() Function

In this article, we are going to see what is getLocaleFirstDayOfWeek in Angular 10 and how to use it. The getLocaleFirstDayOfWeek is used to get the first day of the week for the given locale. Syntax: getLocaleFirstDayOfWeek(locale : string): WeekDay NgModule: Module used by FirstDayOfWeek is: CommonModule Approach: Create the angular app.In app.mo

Angular10 getLocaleDayNames() Function

In this article, we are going to see what is getLocaleDayNames in Angular 10 and how to use it. The getLocaleDayNames is used to get days of the week for the given locale. Syntax: getLocaleDayNames( locale: string, formStyle: FormStyle, width: TranslationWidth ) NgModule: Module used by DayNames is: CommonModule Approach: Create the angular app to

Angular10 percentPipe

In this article, we are going to see what is percentPipe in Angular 10 and how to use it. The percentPipe is used to Transform a number to a percentage string. Syntax: {{ value | percent [ : digitsInfo [ : locale ] ] }} NgModule: Module used by percentPipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import f

Angular10 LowerCasePipe

In this article, we are going to see what is LowerCasePipe in Angular 10 and how to use it. The LowerCasePipe is used to Transforms all the text to lowercase. Syntax: {{ value | lowercase }} NgModule: Module used by LowercaseCasePipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import for the LowerCasePipe to

Angular10 TitleCasePipe

In this article, we are going to see what is TitleCasePipe in Angular 10 and how to use it. TitleCasePipe is used to Transforms all the text to titlecase. Syntax: {{ value | TitleCasePipe }} NgModule: Module used by TitleCasePipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import for the TitleCasePipe to be

Angular10 SlicePipe

In this article, we are going to see what is SlicePipe in Angular 10 and how to use it. SlicePipe is used to create an array containing a slice of the element. Syntax: {{ value | SlicePipe }} NgModule: Module used by SlicePipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import for the SlicePipe to be usedIn

Angular10 getLocaleDirection() Function

In this article, we are going to see what is getLocaleDirection in Angular 10 and how to use it. The getLocaleDirection is used to get the writing direction for the given locale. Syntax: getLocaleDirection(locale: string): 'ltr' | 'rtl' NgModule: Module used by getLocaleDirection is: CommonModule Approach: Create the angular app to be usedIn app.mo

Angular10 getLocaleDayPeriods() Function

In this article, we are going to see what is getLocaleDayPeriods in Angular 10 and how to use it. The getLocaleDayPeriods used to get the day period strings for the given locale. Syntax: getLocaleDayPeriods(locale: string, formStyle: FormStyle, width: TranslationWidth) NgModule: Module used by getLocaleDayPeriods is: CommonModule Approach: Create t

Angular10 getLocaleEraNames() Function

In this article, we are going to see what is getLocaleEraNames in Angular 10 and how to use it. The getLocaleEraNames is used to get the Gregorian-calendar eras for the given locale. Syntax: getLocaleEraNames(locale: string, width: TranslationWidth) NgModule: Module used by getLocaleEraNames is: CommonModule Approach: Create the angular app to be u

Angular10 getLocaleCurrencySymbol() Function

In this article, we are going to see what is getLocaleCurrencySymbol in Angular 10 and how to use it. The getLocaleCurrencySymbol is used to get the currency symbol for the given locale. Syntax: getLocaleCurrencySymbol(locale: string): string | null NgModule: Module used by getLocaleCurrencySymbol is: CommonModule Approach: Create the angular app t

Angular10 getLocaleCurrencyName() Function

In this article, we are going to see what is getLocaleCurrencyName in Angular 10 and how to use it. The getLocaleCurrencyName is used to get the currency name for the given locale. Syntax: getLocaleCurrencyName(locale: string): string | null NgModule: Module used by getLocaleCurrencyName is: CommonModule Approach: Create the angular app to be usedI

Angular10 getLocaleCurrencyCode() Function

In this article, we are going to see what is getLocaleCurrencyCode in Angular 10 and how to use it. The getLocaleCurrencyCode is used to get the default currency code for the given locale. Syntax: getLocaleCurrencyCode(locale: string): string | null NgModule: Module used by getLocaleCurrencyCode is: CommonModule Approach: Create the angular app to

Angular10 getLocaleDateFormat() Function

In this article, we are going to see what is getLocaleDateFormat in Angular 10 and how to use it. The getLocaleDateFormat is used to get the localized date-value formatting for the given locale. Syntax: getLocaleDateFormat(locale: string, width: FormatWidth): string NgModule: Module used by getLocaleDateFormat is: CommonModule Approach: Create the

Angular10 getLocaleDateTimeFormat() Function

In this article, we are going to see what is getLocaleDateTimeFormat in Angular 10 and how to use it. The getLocaleDateTimeFormat is used to get the localized date-time formatting for the given locale. Syntax: getLocaleDateTimeFormat(locale: string, width: FormatWidth): string NgModule: Module used by getLocaleDateTimeFormat is: CommonModule Approa

Angular10 getNumberOfCurrencyDigits() Function

In this article, we are going to see what is getNumberOfCurrencyDigits in Angular 10 and how to use it. The getNumberOfCurrencyDigits is used to get the number of decimal digits for a given currency. Syntax: getNumberOfCurrencyDigits(code: string): number NgModule: Module used by getNumberOfCurrencyDigits is: CommonModule Approach: Create the angul

Angular10 getLocaleId() Function

In this article, we are going to see what is getLocaleId in Angular 10 and how to use it. The getLocaleId is used to get the locale ID from the current locale. Syntax: getLocaleId(locale: string): string NgModule: Module used by getLocaleId is: CommonModule Approach: Create the angular app to be usedIn app.module.ts import LOCALE_ID because we need

Angular10 getLocaleMonthNames() Function

In this article, we are going to see what is getLocaleMonthNames in Angular 10 and how to use it. The getLocaleMonthNames is used to get month of the year for the given locale. Syntax: getLocaleMonthNames(locale: string, formStyle: FormStyle, width: TranslationWidth): ReadonlyArray<string> NgModule: Module used by getLocaleMonthNames is: Comm

Angular10 isPlatformBrowser() Function

In this article, we are going to see what is isPlatformBrowser in Angular 10 and how to use it. The isPlatformBrowser is used to get a platform id that represents a browser platform Syntax: isPlatformBrowser(platformId); NgModule: Module used by isPlatformBrowser is: CommonModule Return Value: returns a Boolean Value stating whether a platform id r

Angular10 isPlatformServer() Function

In this article, we are going to see what is isPlatformServer in Angular 10 and how to use it. The isPlatformServer is used to get a platform id that represents a server platform Syntax: isPlatformServer(platformId); NgModule: Module used by isPlatformServer is: CommonModule Return Value: returns a Boolean Value stating whether a platform id repres

Angular10 JsonPipe

In this article, we are going to see what is JsonPipe in Angular 10 and how to use it. JsonPipe is used to convert an object its JSON representation Syntax: {{ value | json}} NgModule: Module used by JsonPipe is: CommonModule Approach: Create the angular app to be usedThere is no need for any import for the JsonPipe to be usedIn app.component.ts de

Angular10 Animation animate() Function

In this article, we are going to see what is animate in Angular 10 and how to use it. The animate in Angular10 is used to define an animation step that combines styling information with timing information Syntax: animate(timings | styles) NgModule: Module used by animate is: animations Approach: Create the angular app to be usedIn app.module.ts imp

Angular10 Trigger Animation

In this article, we are going to see what is trigger in Angular 10 and how to use it. The trigger in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: animate(name | definitions) NgModule: Module used by trigger is: animations Approach: Create an angular app that to be used.In app.module.ts,

Angular10 State Animation

In this article, we are going to see what is State in Angular 10 and how to use it. The State in Angular10 is used to create an animation trigger containing state and transition of the animation. Syntax: State(name, style, options) NgModule: Module used by State is: animations Approach: Create an angular app that need to be used.In app.module.ts, i

Angular10 animation transition API

In this article, we are going to see what is transition in Angular 10 and how to use it. The transition in Angular10 is used to create a transition for the animation in which an element will go from one state to another. Syntax: transition (stateChangeExpr, steps, options) NgModule: Module used by transition is: animations Approach: Create the angu

Angular10 animation Style API

In this article, we are going to see what is Style in Angular 10 and how to use it. The Style in Angular10 is used to create a key/value object containing CSS properties/styles that can be used for an animation state. Syntax: Style(tokens) NgModule: Module used by Style is: animations Approach: Create the angular app to be used.In app.module.ts imp

AngularJS ng-show Directive

The ng-show Directive in AngluarJS is used to show or hide the specified HTML element. If the given expression in the ng-show attribute is true then the HTML element will display otherwise it hides the HTML element. It is supported by all HTML elements. Syntax: <element ng-show="expression"> Contents... </element> Parameter Value: expre

Article Tags :