Scribd
Upload
64 views4 pages

NG Switch Example

This document demonstrates an Angular switch component that displays different views of a product - details, preview, and description. It uses a switch statement to set the viewName based on the selected option, and displays the corresponding view using NgSwitch. Buttons and a dropdown allow selecting the different views. Previous and next buttons change the view sequentially.

Uploaded by

Solitary Solace
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
64 views4 pages

NG Switch Example

This document demonstrates an Angular switch component that displays different views of a product - details, preview, and description. It uses a switch statement to set the viewName based on the selected option, and displays the corresponding view using NgSwitch. Buttons and a dropdown allow selecting the different views. Previous and next buttons change the view sequentially.

Uploaded by

Solitary Solace
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Ng Switch Example

Switchdemo.component.ts

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-switchdemo',

templateUrl: './switchdemo.component.html',

styleUrls: ['./switchdemo.component.css']

})

export class SwitchdemoComponent {

product:any = {

Name: 'Nike Casuals',

Price: 5000.67,

InStock: true,

Photo: 'assets/shoe.jpg',

Description: 'some details about Nike Casuals'

};

viewName:string = 'details';

DisplayView(val:any) {

switch(val)

case 'details':

this.viewName='details';

break;

case 'preview':

this.viewName = 'preview';

break;

case 'description':

this.viewName = 'description';

break;

default:
this.viewName = 'home';

break;

SelectView(e:any)

if(e.target.name) {

this.DisplayView(e.target.name);

} else {

this.DisplayView(e.target.value)

Views:string[] = ['details', 'preview', 'description'];

counter:number = 0;

PreviousClick(){

this.counter--;

this.viewName = this.Views[this.counter];

NextClick(){

this.counter++;

this.viewName = this.Views[this.counter];

SwitchDemo.Component.html

<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">{{product.Name}}</dd>

<dt class="col-3">Price</dt>

<dd class="col-9">{{product.Price}}</dd>

<dt class="col-3">Stock</dt>

<dd class="col-9">{{(product.Stock==true)?"Available":"Out of Stock"}}</dd>

</dl>

</div>

<div *ngSwitchCase="'preview'">

<h3>Preview</h3>

<img [src]="product.Photo" width="200" height="200">

</div>

<div *ngSwitchCase="'description'">

<h3>Description</h3>
<p>{{product.Description}}</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">&laquo;</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">&raquo;</button>

</div>

</div>

</div>

You might also like