How to list an array in Angular material

Question

I added table in html like this and would like to display the modules arrays under row.moduleKey. I have no idea where I can use ngFor.

the modules table looks like this: enter image description here

ts code:

getAllModulesList() {
    this.educationalContentService.getAllModulesList().subscribe({
        next: (res) => {
            console.log("test", res);
            this.dataSource = new MatTableDataSource(res);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;

        },
        error: () => {
            this.toastr.error('Error while fetching Modules!');
        },
    });
}

html code:

<table mat-table [dataSource]="dataSource" matSort>

                        <ng-container matColumnDef="moduleKey">
                            <th class="client-md-column" mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
                            <td class="client-md-column" mat-cell *matCellDef="let row">{{row.moduleKey}}</td>
                    
                        </ng-container>
                        <ng-container matColumnDef="typeModule">
                            <th class="client-md-column" mat-header-cell *matHeaderCellDef mat-sort-header>Type
                            </th>
                            <td class="client-md-column" mat-cell *matCellDef="let row"></td>
                        </ng-container>

                        <ng-container matColumnDef="action">
                            <th class="client-sm-column" mat-header-cell *matHeaderCellDef mat-sort-header>Action
                            </th>
                            <td class="client-sm-column" mat-cell *matCellDef="let row">
                                <button mat-icon-button (click)="editClient(row)" color="primary">
                                    <mat-icon>edit</mat-icon>
                                </button>
                            </td>
                        </ng-container>



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

                        <!-- Row shown when there is no matching data. -->
                        <tr class="mat-row" *matNoDataRow>
                            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                        </tr>
                    </table>

The table on my site looks like this: enter image description here