<!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;

}