import { Component, Input } from '@angular/core';
@Component({
selector: 'expansion-panel',
templateUrl: './expansion-panel.component.html',
styleUrls: ['./expansion-panel.component.scss'],
})
export class ExpansionPanelComponent {
text: string;
@Input() datas;
isOpenIndex;
constructor() {}
}
<h2 *ngIf="datas?.chart" class="ion-padding-horizontal">{{ datas?.chart?.title }}</h2>
<div *ngIf="datas?.chart" class="ion-padding-horizontal">
<div *ngFor="let entity of datas?.chart?.entities">
<h4 class="ion-text-wrap ion-margin-left ion-margin-top">{{ entity.entityName }}</h4>
<ion-card
(click)="isOpenIndex = isOpenIndex == i ? -1 : i"
class="expansionPanel"
margin
*ngFor="let item of entity?.domains; let i = index"
>
<div class="_flex-box _justify-content-space-between ion-padding" >
<h4 style="flex: 1" class="ion-text-wrap ion-padding-start">{{ item?.domainName }}</h4>
<ion-icon *ngIf="!(isOpenIndex == i)" name="arrow-down" class="ion-margin-end"></ion-icon>
<ion-icon *ngIf="isOpenIndex == i" name="arrow-up" class="ion-margin-end"></ion-icon>
</div>
<div *ngIf="isOpenIndex == i" class="ion-padding">
<table>
<tr *ngFor="let criteria of item.criterias" class="_flex-box _justify-content-space-between _noWrap">
<td class="ion-text-wrap" style="flex: 1">{{ criteria?.name }}</td>
<td class="_flex-box">: {{ criteria?.level }}</td>
</tr>
</table>
</div>
</ion-card>
</div>
</div>
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
background:white
}
th,
td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.expansionPanel {
border-radius: 10px;
}
Legend
Html element with directive