Mat Paginator with Mat Table and async data

Question

I have a problem with the matPaginator from Material Angular.

The Paginator appear but it do not change the data in the mat-table. It's a problem because I have like 5000 raw in my table.

There is my code :

In my component.html

<table
                            mat-table
                            [dataSource]="dataSourceCasEmploi"
                            class="table-cas-emploi"
                        >
                            <ng-container matColumnDef="reference">
                                <th mat-header-cell *matHeaderCellDef>
                                    Référence
                                </th>
                                <td mat-cell *matCellDef="let element">
                                    <p>
                                        {{ element.sReference }}
                                    </p>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="designation">
                                <th mat-header-cell *matHeaderCellDef>
                                    Désignation
                                </th>
                                <td mat-cell *matCellDef="let element">
                                    <p>
                                        {{ element.sDesignation }}
                                    </p>
                                </td>
                            </ng-container>
                            <tr
                                mat-header-row
                                *matHeaderRowDef="displayedColumnsCasEmploi"
                            ></tr>
                            <tr
                                mat-row
                                *matRowDef="
                                    let row;
                                    columns: displayedColumnsCasEmploi
                                "
                            ></tr>
                        </table>
                        <mat-paginator
                            [length]="dataSourceCasEmploi.data.length"
                            [pageSize]="10"
                            [pageSizeOptions]="[5, 10, 30, 50]"
                            aria-label="Select page"
                            showFirstLastButtons
                        >
                        </mat-paginator>

In my component.ts :

import { MatPaginator } from '@angular/material/paginator';

@Component({
    selector: 'app-affichage-emb',
    templateUrl: './affichage.component.html',
    styleUrls: ['./affichage.component.css'],
})
export class AffichageEmballageComponent implements OnInit {
    @ViewChild(MatPaginator) paginator: MatPaginator;

dataSourceCasEmploi: MatTableDataSource<CasEmploi>;
displayedColumnsCasEmploi: string[] = [
        'reference', 'designation'
    ];


    ngOnInit(): void {
        
        this.activatedRoute.params.subscribe((params: Params) => {
            this.idEmballage = params['id'];
            this.loadData();
        });
    }


chargerCasEmploi() {
        if(!this.donneesCasEmploiLoaded){
            this.casEmploiService.getCasEmploi(this.idEmballage).subscribe((casEmplois) => {
                this.casEmplois = casEmplois;
                this.dataSourceCasEmploi = new MatTableDataSource(this.casEmplois);
                this.dataSourceCasEmploi.paginator = this.paginator;

                this.donneesCasEmploiLoaded = true;
            });
        }
    }

}

The chargerCasEmploi() method is loaded inside a huge method loadData() which is called in the OnInit()

EDIT !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Looks like paginator is undefined