src/app/shared/components/expandable/expandable.component.html

<!-- /********************************************************************************
* Copyright (c) 2020 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
*
* This program and the accompanying materials are made available under the
* terms of the Eclipse Public License v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<div class="panel panel-default" style="width:100%;">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse">
            <i *ngIf="isExpandedStatus" class="fa fa-chevron-up" aria-hidden="true"></i>
            <i *ngIf="!isExpandedStatus" class="fa fa-chevron-down" aria-hidden="true"></i>
        </a>
        <a data-toggle="collapse" href="#{{collapseId}}" (click)="isExpandedStatus = !isExpandedStatus">
            <ng-content select="[header]"></ng-content>
        </a>

        </h4>
    </div>
    <div *ngIf="isExpandedStatus" id="{{collapseId}}" class="collapse5 panel-collapse collapse in" [ngClass]="{'in': !isStatusCollapsed }">
        <ng-content class="bodyContent" select="[body]"></ng-content>
    </div>
</div>