import { Component , Input , OnDestroy } from '@angular/core' ; @ Component ( { selector : 'accordion' , template : `
  <ng-content></ng-content>
          ` , host : { 'class' : 'panel-group' } } ) export class Accordion { groups : Array < AccordionGroup > = [ ] ; addGroup ( group ) { this . groups . push ( group ) ; } closeOthers ( openGroup ) { this . groups . forEach ( ( group ) => { if ( group !== openGroup ) { group . isOpen = false ; } } ) ; } removeGroup ( group ) { const index = this . groups . indexOf ( group ) ; if ( index !== - 1 ) { this . groups . splice ( index , 1 ) ; } } } @ Component ( { selector : 'accordion-group' , template : `
                <div class="panel panel-default" [ngClass]="{'panel-open': isOpen}">
                  <div class="panel-heading" (click)="toggleOpen($event)">
                    <h4 class="panel-title">
                      <a href tabindex="0"><span>{{heading}}</span></a>
                    </h4>
                  </div>
                  <div class="panel-collapse" [hidden]="!isOpen">
                    <div class="panel-body">
                        <ng-content></ng-content>
                    </div>
                  </div>
                </div>
          ` , } ) export class AccordionGroup implements OnDestroy { private _isOpen : boolean = false ; @ Input ( ) heading : string ; @ Input ( ) set isOpen ( value ) { this . _isOpen = value ; if ( value ) { this . accordion . closeOthers ( this ) ; } } get isOpen ( ) { return this . _isOpen ; } constructor ( private accordion ) { this . accordion . addGroup ( this ) ; } ngOnDestroy ( ) { this . accordion . removeGroup ( this ) ; } toggleOpen ( event ) { event . preventDefault ( ) ; this . isOpen = ! this . isOpen ; } }