Rows of angular material mat-table that are hidden

Question

I use angular Material table inside a div for which I update the height and visibility property. At the beginning I set height to 100% and visibility to 'visible'. I can see 20 rows displayed By an action, I set height to 0px and visibility to 'hidden' and display another part of template in the same html page. Everything is working fine. By a reverse action I set height to 100% and visibility to 'visible'. At this moment I can see the table header but no rows displayed. The element is empty. I cannot see why ?

Here is the relative part of template that is concerned

<div [style.width.%]="100" [style.height]="!displayForm ? '100%' : '0px'" [style.visibility]="displayForm ? 'hidden': 'visible'" style="position:relative;" class="mat-elevation-z8">
    <table  mat-table [dataSource]="dataSourceEntityList" multiTemplateDataRows matSort>

        <!-- identifiant Column -->
        <ng-container matColumnDef="identifiant">
            <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col"> Id </th>
            <td mat-cell *matCellDef="let element">{{element.identifiant}}</td>
        </ng-container>

        <!-- date of the meeting -->
        <ng-container matColumnDef="entityDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col"> Meeting date </th>
            <td class="textAlignCenter" mat-cell *matCellDef="let element"> {{element.entityDate | date:'dd/MM/yyyy'}}</td>
        </ng-container>


        <!-- name Column -->
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col"> Name </th>
            <td mat-cell *matCellDef="let element">{{element.name}}</td>
        </ng-container>

        <!-- place Column -->
        <ng-container matColumnDef="place">
            <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col"> Place </th>
            <td mat-cell *matCellDef="let element">{{element.place}}</td>
        </ng-container>

        <!-- department Column -->
        <ng-container matColumnDef="department">
            <th mat-header-cell *matHeaderCellDef mat-sort-header scope="col"> Department</th>
            <td mat-cell *matCellDef="let element"> <span title="{{(element.department && element.department.length > 0) ? getCodeFromCommission(element.department).join(', ') : ''}}">{{(element.department && element.department.length > 0) ? getCodeFromDepartment(element.department).join(", ").length > 10 ? getCodeFromDepartment(element.department).join(", ").substring(0,10) + '...' : getCodeFromDepartment(element.department).join(", ") : ''}} </span></td>
        </ng-container>


        <!-- Actions Column -->
        <ng-container matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef scope="col">Actions</th>
            <td mat-cell *matCellDef="let element">
                <mat-icon  title="Edit Presence List" style="cursor: pointer;" class="material-icons-outlined" (click)="cloneFlag = false; displayForm = true; displayDetails = true; displayGrantAccess = false; displayModifyForm('formModifyId', element, false)">edit</mat-icon>
                <mat-icon  title="Clone Presence List" style="cursor: pointer; margin-left: 10px;" class="material-icons-outlined" (click)="cloneFlag = true; displayForm = true; displayDetails = true; displayGrantAccess = false;displayModifyForm('formModifyId', element, true)">control_point_duplicate</mat-icon>
                <mat-icon  title="Download PDF report" style="cursor: pointer; margin-left: 10px;" class="material-icons-outlined" (click)="downloadReport(element)">get_app</mat-icon>
                <mat-icon  title="Upload document" style="cursor: pointer; margin-left: 10px;" class="material-icons-outlined" (click)="displayForm = true; displayDetails = false; displayGrantAccess = false;uploadReport(element)">cloud_upload</mat-icon>
                <mat-icon  [style.visibility]="(user.firstName === element.responsable.firstname && user.lastName === element.responsable.lastname && !displayForm) ? 'visible': 'hidden'" title="Grant access to people" style="cursor: pointer; margin-left: 10px;" class="material-icons-outlined" (click)="displayForm = true; displayGrantAccess = true;grantAccessRights(element)">accessibility</mat-icon>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumnsEntityList"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumnsEntityList;" class="table-row">
        </tr>
    </table>

    <mat-paginator #entityListPaginator *ngIf="totalLengthEntityList >20" [length]="totalLengthEntityList" [pageSizeOptions]="[20]" showFirstLastButtons></mat-paginator>
</div>

scenario:

1. displayForm = false -> everything is allright -> 20 rows are displayed
2. displayForm = true -> everything is allright -> the table is hidden and I display another template part
3. displayForm = false -> I can see the header of the table. the datasource still contains 20 rows, but no rows are displayed -> this is the BUG