In this code snippet, everything seems to be functioning perfectly. When you click on the magnifying glass icon, some additional information is displayed:
<mat-card *ngIf="(bills && bills.length > 0) && all" style="overflow-x: auto;">
<mat-card-content>
<mat-card *ngFor="let bill of bills; let i = index;" style="margin-top:1%; margin-bottom: 1%;">
<mat-card-content>
<mat-list role="list">
<mat-list-item role="listitem" [ngClass]="{'section-active': bill.open, 'section':!bill.open}">
<table style="table-layout: fixed;">
<thead>
<tr>
<th style="width:7%">{{ 'fields.registrationDate' | translate }}</th>
<th style="width:10%">{{ 'fields.favored' | translate }}</th>
<th style="width:18%">{{ 'fields.descritive' | translate }}</th>
<th style="width:10%"> {{ 'fields.generatedIn' | translate }}</th>
<th style="width:6%">{{ 'fields.invoiceNumber' | translate }}</th>
<th style="width:5%">{{ 'fields.portions' | translate }}</th>
<th style="width:5%">Status</th>
<th style="width:8%">{{ 'fields.value' | translate }}</th>
<th style="width:8%">{{ 'fields.realizedValue' | translate }}</th>
<th style="width:7%">{{ 'fields.nextMaturity' | translate }}</th>
<th style="width:15%">{{ 'fields.actions' | translate }}</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:5%;" style="font-size: 12.5px;">{{ bill.dateInsert | date:'dd/MM/yyyy' }}</td>
<td style="font-size: 12.5px;" class="td10" [matTooltip]="bill.provider.name">{{ bill.provider.name | limitTo: 22 }}</td>
...
...
more table data here
...
</div>
</td>
</tr>
</tbody>
</table>
</mat-list-item>
</span>
</mat-list>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
After examining the code, it appears that only one title for the table should appear without repeating for each row. However, achieving this functionality seems to be tricky due to the expanding nature of the data when clicking on an image.
I attempted a solution below, but it resulted in misconfigurations:
<mat-card *ngIf="(bills && bills.length > 0) && all" style="overflow-x: auto;">
<mat-card-content>
<mat-card style="margin-top:1%; margin-bottom: 1%;">
<mat-card-content>
<mat-list role="list">
<table style="table-layout: fixed;">
<thead>
<tr>
<th style="width:7%">{{ 'fields.registrationDate' | translate }}</th>
<th style="width:10%">{{ 'fields.favored' | translate }}</th>
...
...
more table header data here
...
</tr>
</thead>
<tbody>
<mat-list-item role="listitem" *ngFor="let bill of bills; let i = index;" [ngClass]="{'section-active': bill.open, 'section':!bill.open}">
<tr>
...
...
more table body data here
...
</span>
</td>
</tr>
</tbody>
</table>
<span class="child-list">
...
...
more nested content here
...
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
Please review and adjust the code as needed to achieve the desired outcome.