<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
    <!-- 1. Load libraries -->
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
    </script>

    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/app').then(function(src) {
          ng.bootstrap(src.App);
        });
      });
    </script>

  </head>

  <!-- 4. Display the application -->
  <body>
    <my-app class="container" style="display: block">Loading...</my-app>
  </body>

</html>
import {Component} from 'angular2/core';
import {Panel} from './panel';

@Component({
  selector: 'my-app',
  template: `
    <h4>Collapsable Panels in Angular 2.0</h4>
    <p>Click bars to toggle content</p>
    
    <panel [title]="'My static title'" >static content</panel>
    <panel [title]="title" >{{body}}</panel>
    `,
  directives: [Panel]
})
export class App {
  title: string = 'my awesome title';
  body: string = 'my awesome content';
}

import {Component, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'panel',
  styles: [`
    .hide {
      display: none;
    },
    `
  ],
  template: `
  <div class="card" *ngIf="title">
    <div class="card-header" (click)="toggle()">{{title}}  </div>
    <div  class="card-block" [ngClass]="{hide: !opened}"><ng-content></ng-content></div>
  </div>`,
  inputs: ['title']
})
export class Panel {
    opened: Boolean = false;
    toggle () {
      this.opened = !this.opened;
    }
  }
}