Understanding With ng-Switch Statements In Angular

Ng-Switch statements in Angular

 

Ng switch is actually comprised of two directives, an attribute directive and a structural directive. It's very similar to switch statements in Javascript andnother programming languages but only in the template.

 

The ng-switch lets you hide and show HTML elements. Depending on the expression we can also define a default section by using the ng switch default directives to show a section if none of the other sections gets a match.

 

There are three things to keep in mind: ng switch, ng-switch-case, ng-switch.

 

Ng switch statements are where one alternative is chosen from the number of alternatives. And ng switch is performed indirectly. That means users have the choice to choose anyone from the list. There have no bound to choose any number or element.

 

Example of ng-switch statements - list of years, list of the month, calendar, weak days, and student data.

 

Example of switch statements

 

First, you have to create an application using the command “ng new application name”.

 

Then you have to open this application and then create a component using the command “ ng g component component-name”.

 

Now go to the module file and check all dependencies and register our component in the bootstrap section.

 

Then you have to go to the .html page and take a drop-down.

 

Then create a function into the dropdown and then create an event into the function.

 

And then take no of alternatives according to your requirements.

 

Now you have to take a <div></div> using div tag.

 

Then you have to take an array [ switch ]=” choose”. And then add a variable for the array with any name.

 

Then take the switchCase into the <h3></h3> tag.

 

In the end, take a default case for the default value.

 

Now you have to go to the .ts file and take your variable publicly.

 

Then you have to create a function you have to create in the HTML file. Then take any variable and create a query.

 

switch.html

<h2><p> NG Switch Statements</p></h2>
<select (change)="setvalue($event)">
    <option value="">...Select...</option>
    <option value="one  ">one</option>
    <option value="Monday ">Monday</option>
    <option value="Tuesday ">Tuesday</option>
    <option value="Wednesday ">Wednesday</option>
    <option value="Thrusday ">Thrusday</option>
    <option value="Friday ">Friday</option>
    <option value="Saturday ">Saturday</option>
    <option value="another ">Another</option>

</select>

<div [ngSwitch]="choose">
    <h3 *ngSwitchCase="'one'"></h3>
    <h3 *ngSwitchCase="'Monday'"></h3>
    <h3 *ngSwitchCase="'Tuesday'"></h3>
    <h3 *ngSwitchCase="'Wednesday'"></h3>
    <h3 *ngSwitchCase="'Thrusday'"></h3>
    <h3 *ngSwitchCase="'Friday'"></h3>
    <h3 *ngSwitchCase="'saturday'"></h3>
</div>

switch.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-switch',
  templateUrl: './switch.component.html',
  styleUrls: ['./switch.component.css']
})
export class SwitchComponent{
 public choose='';
 setvalue(drp:any){
   this.choose=drp.target.value;
 }
}

module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import {HttpClientModule } from '@angular/common/http'
import { AppComponent } from './app.component';
import { AddComponent } from './add/add.component';
import { RouterModule, Routes} from '@angular/router';
import{BookService } from './book.service';
import {InMemoryWebApiModule } from 'angular-in-memory-web-api';
import {TestData } from './testdata'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ShowdataComponent } from './showdata/showdata.component';
import { CommonModule } from '@angular/common';
import { IfelseComponent } from './ifelse/ifelse.component';
import { SwitchComponent } from './switch/switch.component';
const routes: Routes = [
  {path:'', component:AddComponent},
  { path:'add', component:AddComponent}
];
@NgModule({
  declarations: [
    AppComponent,
    AddComponent,
    ShowdataComponent,
    IfelseComponent,
    SwitchComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,RouterModule.forRoot(routes),ReactiveFormsModule, FormsModule,
    HttpClientModule, CommonModule,
    InMemoryWebApiModule.forRoot(TestData)
  ],
  providers: [BookService],
  bootstrap: [SwitchComponent]
})
export class AppModule { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dhwani</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-switch></app-switch>
</body>
</html>

Now save all the files and compile the project using the command “ng serve”.

 

After successfully completing the project you have to go to the browser and hit “localhost:4200”. After a few seconds your browser will show the output like,

 

 

Now you can see that there is no selective value in the dropdown and the value will be shown by default.

 

Now select any value from the dropdown and after selecting the value the output will be shown,

 

 

Now you can see that Monday will be selected from the dropdown, and Monday will be shown on the display.

 

Now select Friday from the dropdown and see the output.

 

 

Now you can see that Friday will be selected from the dropdown and the name Friday will be shown in the place of the default.

 

Now you can see that our switch statement application performed its work properly. 

 

Follow Chaman Gautam to learn more about angular. Follow C# Corner to learn about more technology.