Expand/collapse component

expand-collapse.component.html

<div>
    <a [ngClass]="{'active': isActive}" (click)="toggle()">{{tabTitle}}</a>
    <ng-content *ngIf="isActive"></ng-content>
</div>

expand-collapse.component.ts

import {Component} from "@angular/core";
import {TabComponent} from "./tab.component";

/**
 * Component for expand/collapse interface
 *
 *
 * Usage:
 *  <wu-expand-collapse [tabTitle]="'Title'">
 *          .... content here.....
 *  </wu-expand-collapse>
 *
 */
@Component({
    templateUrl: './expand-collapse.component.html',
    selector: 'wu-expand-collapse',
    styleUrls: ['./expand-collapse.component.scss']
})
export class ExpandCollapseComponent extends TabComponent {

    /**
     * Sets selected tab as active
     */
    toggle() {
        this.isActive = !this.isActive;
    }
}