ng2-encrm-components/components/accordion/accordion-group/accordion-group.component.html

angular 2 components

<div class="card">
  <div class="card-header en-accordion-header" role="tab" id="headingOne" [ngClass]="{'exp': isExpanded}">
    <h4 class="card-title">
      <a href="javascript:void(0)" *ngIf="heading" (click)="isExpanded=!isExpanded">{{heading}}</a>
      <ng-content select="[head]"></ng-content>

      <div class="arrow" *ngIf="heading">
        <span class="material-icons" *ngIf="isExpanded"
              (click)="isExpanded = false">keyboard_arrow_down</span>
        <span class="material-icons" *ngIf="!isExpanded"
              (click)="isExpanded = true">keyboard_arrow_up</span>
      </div>
      <div class="arrow" *ngIf="!heading">
        <span class="material-icons" *ngIf="isExpanded" (click)="close()">keyboard_arrow_down</span>
        <span class="material-icons" *ngIf="!isExpanded" (click)="open()">keyboard_arrow_up</span>
      </div>
    </h4>
  </div>
  <div class="card-block collapse in" [ngClass]="{'exp': isExpanded}" role="tabpanel">
    <div>
      <ng-content></ng-content>
      <ng-content select="[body]"></ng-content>
    </div>
  </div>
  <!--<div class="card-block" [@accordionState]="isExpanded.toString()" role="tabpanel">-->
    <!--<ng-content></ng-content>-->
    <!--<ng-content select="[body]"></ng-content>-->
  <!--</div>-->
</div>