Open In App

Angular10 NgSwitch Directive

Last Updated : 21 Jul, 2021
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

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



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:
2 min read
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
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'></li> NgModule: Module used by NgSwitchCase is: Co
1 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
1 min read
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
1 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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
2 min read
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,
2 min read
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
2 min read
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
2 min read
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
1 min read
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
2 min read
three90RightbarBannerImg