<!DOCTYPE html>
<html>
<head>
<title>Angular 2 ngSwitch Example</title>
<!-- 1. Load libraries -->
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.14/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.14/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.14/angular2.dev.js"></script>
<link rel="stylesheet" href="styles.css" />
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'src': {defaultExtension: 'ts'}}
});
</script>
<!-- Config Agular 2 and Typescript -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 4. Display the application -->
<body>
<h1>Angular 2 ngSwitch Example:</h1>
<!--
<div [ngSwitch]="1">
<div *ngSwitchWhen="1">ngSwitch Case 1</div>
<div *ngSwitchWhen="2">ngSwitch Case 1</div>
</div>
-->
<my-app>Loading...</my-app>
</body>
</html>
/* Styles go here */
import {bootstrap} from 'angular2/platform/browser';
import {Angular2NgSwitch} from './angular-2-ngSwitch';
bootstrap(Angular2NgSwitch);
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://www.angulartypescript.com/
*/
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES} from 'angular2/common';
/*Angular 2 NgIf Example*/
@Component({
selector: 'my-app',
template:`
<div [ngSwitch]="1">
<p>Selecect case == 1</p>
<div *ngSwitchWhen="1">ngSwitch Case 1</div>
<div *ngSwitchWhen="2">ngSwitch Case 2</div>
</div>
`,
directives: [CORE_DIRECTIVES]
})
export class Angular2NgSwitch {
showMe:boolean = true;
doNotShowMe:boolean = false;
}