📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Check out complete Angular 9 tutorial with examples - Angular 9 Tutorial.
NgSwitch Directive
- Every view that matches are rendered.
- If there are no matches, a view with the ngSwitchDefault directive is rendered.
- Elements within the [NgSwitch] statement but outside of any NgSwitchCase or ngSwitchDefault directive are preserved at the location.
Syntax
<container-element [ngSwitch]="switch_expression">
<container-element [ngSwitch]="switch_expression">
<some-element *ngSwitchCase="match_expression_1">...</some-element>
...
<some-element *ngSwitchDefault>...</some-element>
</container-element>
<!-- ngSwitch and ngSwitchCase - enum example --> <b> ngSwitch and ngSwitchCase - enum example</b> <div [ngSwitch]="day"> <b *ngSwitchCase="days.SUNDAY"> SUNDAY</b> <b *ngSwitchCase="days.MONDAY"> MONDAY</b> <b *ngSwitchCase="days.TUESDAY">TUESDAY</b> <b *ngSwitchCase="days.WEDNESDAY">WEDNESDAY</b> <b *ngSwitchCase="days.THURSDAY">THURSDAY</b> <b *ngSwitchCase="days.FRIDAY">FRIDAY</b> <b *ngSwitchCase="days.SATURDAY">SATURDAY</b> <b *ngSwitchDefault>No Days</b> </div>
Angular 9 ngSwitch Example
Create an Angular Component - NgSwitchComponent
C:\Angular\angular9-helloworld-example-tutorial> ng g c ng-switch
CREATE src/app/ng-switch/ng-switch.component.html (24 bytes)
CREATE src/app/ng-switch/ng-switch.component.spec.ts (643 bytes)
CREATE src/app/ng-switch/ng-switch.component.ts (280 bytes)
CREATE src/app/ng-switch/ng-switch.component.css (0 bytes)
UPDATE src/app/app.module.ts (890 bytes)
ng-switch.component.ts - NgSwitchComponent
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-ng-switch',
templateUrl: './ng-switch.component.html',
styleUrls: ['./ng-switch.component.css']
})
export class NgSwitchComponent implements OnInit {
constructor() { }
ngOnInit() {
}
user = "Ramesh";
numbers = [1,2,3,4,5,6,7,8,9];
days = Days;
day = Days.SUNDAY;
}
export enum Days {
SUNDAY,
MONDAY,
TUESDAY,
WEDNESDAY,
THURSDAY,
FRIDAY,
SATURDAY
}
ng-switch.component.html - ngSwitch Directive Examples
<div class="container">
<h1>ngSwitch Directive Examples</h1>
<!-- Simple ngSwitch Example -->
<b> Simple ngSwitch Example</b>
<ul [ngSwitch]="user">
<li *ngSwitchCase="'Ramesh'">Hi Ramesh</li>
<li *ngSwitchCase="'Tony'">Hi Tony</li>
<li *ngSwitchCase="'Tom'">Ho Tom</li>
<li *ngSwitchDefault>No user found</li>
</ul>
<!-- ngSwitch and ngSwitchCase - even odd number example -->
<b> ngSwitch and ngSwitchCase - even odd number example</b>
<div *ngFor="let number of numbers">
<div ngSwitch="{{number % 2}}">
<div *ngSwitchCase="'0'">{{number}} - Even number.</div>
<div *ngSwitchCase="'1'">{{number}} - Odd number.</div>
<div *ngSwitchDefault>Nothing Found.</div>
</div>
</div>
<!-- ngSwitch and ngSwitchCase - enum example -->
<b> ngSwitch and ngSwitchCase - enum example</b>
<div [ngSwitch]="day">
<b *ngSwitchCase="days.SUNDAY"> SUNDAY</b>
<b *ngSwitchCase="days.MONDAY"> MONDAY</b>
<b *ngSwitchCase="days.TUESDAY">TUESDAY</b>
<b *ngSwitchCase="days.WEDNESDAY">WEDNESDAY</b>
<b *ngSwitchCase="days.THURSDAY">THURSDAY</b>
<b *ngSwitchCase="days.FRIDAY">FRIDAY</b>
<b *ngSwitchCase="days.SATURDAY">SATURDAY</b>
<b *ngSwitchDefault>No Days</b>
</div>
</div>
app-routing.module.ts - Add Entry Routing
{path: 'ng-switch', component: NgSwitchComponent}
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { NgforComponent } from './ngfor/ngfor.component';
import { NgifComponent } from './ngif/ngif.component';
import { NgSwitchComponent } from './ng-switch/ng-switch.component';
const routes: Routes = [
{path: '', component: HelloWorldComponent},
{path: 'hello-world', component: HelloWorldComponent},
{path: 'ng-for', component: NgforComponent},
{path: 'ng-if', component: NgifComponent},
{path: 'ng-switch', component: NgSwitchComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Output
Check out complete Angular 9 tutorial with examples - Angular 9 Tutorial.
Comments
Post a Comment
Leave Comment