Angular material table sticky not working on header

I want to use the material table sticky parameter, but for some reason it doesn't work in the table header, it works nicely in the sections below, it just slides in the header when I scroll sideways.

Here is the HTML code:

<div class="table-container">
<table mat-table [dataSource]="dataSource" matSort>

<ng-container matColumnDef="select" sticky>
<th mat-header-cell *matHeaderCellDef class="px-2 w-50px">
<div class="pr-3">
<mat-checkbox (change)="$event ? masterToggle() : null" color="warn"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()" [attr.aria-label]="checkboxLabel()">
</mat-checkbox>
</div>
</th>
<td mat-cell *matCellDef="let row" class="px-2 w-50px">
<div class="pr-3">
<mat-checkbox (click)="$event.stopPropagation()" color="warn"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
[attr.aria-label]="checkboxLabel(row)">
</mat-checkbox>
</div>
</td>
</ng-container>

<!-- name -->
<ng-container matColumnDef="name" sticky>
<th mat-header-cell *matHeaderCellDef class="pl-3">
<div class="d-flex flex-column pl-0 pr-2">
<div mat-sort-header>
Name
</div>
</div>
</th>
<td mat-cell *matCellDef="let element">
<div>
<!-- ... -->
</div>
</td>
</ng-container>

<!-- ... -->

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

</div>


I invite everything well, everything works since the sticky in the lines below also works. What can I do to fix the bug so that the sticky works in the header too?

Continue reading...