Angular2 ng-if (*ng-if) Example

<!DOCTYPE html>
<head>
  <title>Angular2 ng-if Example</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
  <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-alpha.37/angular2.min.js"></script>
  <script>
    System.config({
      //use typescript for compilation.
      transpiler: 'typescript',
      
      //typescript compiler options.
      typescriptOptions: {
        emitDecoratorMetadata: true
      },
      
      //map.
      map: {
        app: "./src"
      },
      
      //packages defines.
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        }
      }
    });
    
     System.import('app');
  </script>
</head>

<body>
  <toggle-app></toggle-app>
</body>

</html>

/* Styles go here */

/* Styles go here */

.border {
  border: 1px solid black;
  margin-top: 20px;
}

//main entry point
import {bootstrap} from 'angular2/angular2'
import {App} from './app'

bootstrap(App);

//our root app component
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'


//Component
@Component({
  selector: 'toggle-app',
  bindings: []
})

//View
@View({
  template: `
      <div>
           <button (click)="toggle()">Toggle Button</button>
      </div>
      <div class="border">
        <div *ng-if="isActive">
          <h1>Hello Angular 2, Toggle Button.</h1>
        </div>
      </div>
     <p>Status(isActive): {{isActive}}</p>
     <p><a href="http://www.code-sample.com" target="_blank">Welcome to http://www.code-sample.com</a></p>
  `,
  directives: [CORE_DIRECTIVES]
})


export class App {
  isActive: bool = true;
  toggle() {
    this.isActive = !this.isActive;
  }
}