Angular Js 2 - Built-in components - ngSwitch component app demo
In the code below we demonstrate how the built-in ngSwitch component can be used to show those list items that we want to show based on the value of the variable choice in the ngSwitch. Note that when he value of choice variable is 2 then two list items are shown, i.e "Second choice" and "Second choice, again" as both the list items use the same condition *ngSwitchWhen="2". We also use *ngSwitchDefault to show how to use the "else" case in an if-else structure. We can use ngSwitch built-in component without the default case if we want to.
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
@Component({
selector: 'switch-sample-app',
template: `
<h4 class="ui horizontal divider header">
Current choice is {{ choice }}
</h4>
<div class="ui raised segment">
<ul [ngSwitch]="choice">
<li *ngSwitchWhen="1">First choice</li>
<li *ngSwitchWhen="2">Second choice</li>
<li *ngSwitchWhen="3">Third choice</li>
<li *ngSwitchWhen="4">Fourth choice</li>
<li *ngSwitchWhen="2">Second choice, again</li>
<li *ngSwitchDefault>Default choice</li>
</ul>
</div>
<div style="margin-top: 20px;">
<button class="ui primary button" (click)="nextChoice()">
Next choice
</button>
</div>
`
})
class SwitchSampleApp {
choice: number;
constructor() {
this.choice = 1;
}
nextChoice() {
this.choice += 1;
if (this.choice > 5) {
this.choice = 1;
}
}
}
bootstrap(SwitchSampleApp);
/******************************************************************************/
The index.html is given below:
<!doctype html>
<html>
<head>
<title>Angular 2 - ngSwitch demo</title>
<link rel="icon" type="image/png" href="resources/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="resources/images/favicon.ico" />
<!-- Libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="resources/vendor/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Configure System.js, our module loader -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app.js')
.then(null, console.error.bind(console));
</script>
<!-- Menu Bar -->
<div class="ui menu">
<div class="ui container">
<a href="#" class="header item">
<img class="logo" src="resources/images/ng-book-2-minibook.png">
ng-book 2
</a>
<div class="header item borderless">
<h1 class="ui header">
Angular 2 ngSwitch demo
</h1>
</div>
</div>
</div>
<div class="ui main text container">
<switch-sample-app></switch-sample-app> <!-- Our app loads here -->
</div>
</body>
</html>
/******************************************************************************/
The file styles.css has the following code:
body {
font-family: verdana, arial, helvetica, sans-serif;
}
div {
padding: 3px;
margin: 2px;
}
.ui.menu .item img.logo {
margin-right: 1.5em;
}
/******************************************************************************/
No comments:
Post a Comment