ngSwitch (Switch Case)
<nav>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">
<a (click)="viewMode = 'map'" [class.active]="viewMode == 'map'">Map View</a>
</li>
<li class="tab">
<a (click)="viewMode = 'list'" [class.active]="viewMode == 'list'">List View</a>
</li>
</ul>
</div>
</nav>
<div [ngSwitch]="viewMode">
<div *ngSwitchCase="'map'">Map View Content</div>
<div *ngSwitchCase="'list'">List View Content</div>
<div *ngSwitchDefault>Otherwise</div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
viewMode = 'map';
}