Ng Switch Example
[Link]
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-switchdemo',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class SwitchdemoComponent {
product:any = {
Name: 'Nike Casuals',
Price: 5000.67,
InStock: true,
Photo: 'assets/[Link]',
Description: 'some details about Nike Casuals'
};
viewName:string = 'details';
DisplayView(val:any) {
switch(val)
case 'details':
[Link]='details';
break;
case 'preview':
[Link] = 'preview';
break;
case 'description':
[Link] = 'description';
break;
default:
[Link] = 'home';
break;
SelectView(e:any)
if([Link]) {
[Link]([Link]);
} else {
[Link]([Link])
Views:string[] = ['details', 'preview', 'description'];
counter:number = 0;
PreviousClick(){
[Link]--;
[Link] = [Link][[Link]];
NextClick(){
[Link]++;
[Link] = [Link][[Link]];
[Link]
<div class="container-fluid">
<div class="mt-2 btn-toolbar bg-danger justify-content-between">
<div class="btn-group">
<button (click)="SelectView($event)" name="home" class="btn btn-danger">Home</button>
<button (click)="SelectView($event)" name="details" class="btn
btn-danger">Details</button>
<button (click)="SelectView($event)" name="preview" class="btn
btn-danger">Preview</button>
<button (click)="SelectView($event)" name="description" class="btn btn-
danger">Description</button>
</div>
<div class="btn-group">
<select class="btn-danger text-white" (change)="SelectView($event)">
<option value="noview">Select View</option>
<option value="details">Details</option>
<option value="preview">Preview</option>
<option value="description">Description</option>
</select>
</div>
</div>
<div class="mt-2" [ngSwitch]="viewName" style="height: 300px;">
<div *ngSwitchCase="'details'">
<h3>Basic Details</h3>
<dl class="row">
<dt class="col-3">Name</dt>
<dd class="col-9">{{[Link]}}</dd>
<dt class="col-3">Price</dt>
<dd class="col-9">{{[Link]}}</dd>
<dt class="col-3">Stock</dt>
<dd class="col-9">{{([Link]==true)?"Available":"Out of Stock"}}</dd>
</dl>
</div>
<div *ngSwitchCase="'preview'">
<h3>Preview</h3>
<img [src]="[Link]" width="200" height="200">
</div>
<div *ngSwitchCase="'description'">
<h3>Description</h3>
<p>{{[Link]}}</p>
</div>
<div *ngSwitchDefault>
<h2>Product Details - Home Page</h2>
</div>
</div>
<div class="mt-2 pagination">
<div class="page-item">
<button (click)="PreviousClick()" class="btn btn-outline-danger">«</button>
</div>
<div class="page-item">
<button (click)="SelectView($event)" name="details" class="btn
btn-outline-danger">1</button>
</div>
<div class="page-item">
<button (click)="SelectView($event)" name="preview" class="btn
btn-outline-danger">2</button>
</div>
<div class="page-item">
<button (click)="SelectView($event)" name="description" class="btn
btn-outline-danger">3</button>
</div>
<div class="page-item">
<button (click)="NextClick()" class="btn btn-outline-danger">»</button>
</div>
</div>
</div>