Add multiple levels of row expansion using mat-table in Angular

Question

I'm trying to show a table with multiple levels of row expansion using Angular mat-table.

Html code

<table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <ng-container *ngIf="column !== 'action'; else action">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>
    <ng-template #action>
        <th mat-header-cell *matHeaderCellDef> Actions </th>
        <td mat-cell *matCellDef="let element">
            <mat-icon (click)="expandedElement = expandedElement === element ? null : element">{{expandedElement ===
                element
                ? 'expand_less' : 'expand_more'}}</mat-icon>
        </td>
    </ng-template>
</ng-container>
<ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
        <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <table mat-table [dataSource]="element.addresses">
                <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
                    <ng-container *ngIf="innerColumn == 'expand'">
                        <th mat-header-cell *matHeaderCellDef> </th>
                        <td mat-cell *matCellDef="let element">
                            <mat-icon
                                (click)="expandedSecElement = expandedSecElement === element ? null : element">
                                {{expandedSecElement ===
                                element ? 'expand_less' : 'expand_more'}}</mat-icon>
                        </td>
                    </ng-container>
                    <th mat-header-cell *matHeaderCellDef> {{innerColumn}} </th>
                    <td mat-cell *matCellDef="let element"> {{element[innerColumn]}} </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></tr>
            </table>
        </div>
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
    [class.example-expanded-row]="expandedElement === element">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

.ts file

let ELEMENT_DATA = [{"position":1,"name":"Hydrogen","weight":1.0079,"symbol":"H","addresses":[{"details":[{"Name":"Daliya","Age":"23","Class":"10"}],"street":"Street 1","zipCode":"78542","city":"Kansas"},{"details":[{"Name":"Daliya","Age":"23","Class":"10"}],"street":"Street 2","zipCode":"78522","city":"AAAA"}]},{"position":2,"name":"Helium","weight":4.0026,"symbol":"He","addresses":[{"details":[{"Name":"Daliya","Age":"23","Class":"10"}],"street":"Street 1","zipCode":"78542","city":"Kansas"}]},{"position":3,"name":"Lithium","weight":6.941,"symbol":"Li","addresses":[{"details":[{"Name":"Daliya","Age":"23","Class":"10"}],"street":"Street 1","zipCode":"78542","city":"Kansas"}]}]

Is it possible to add multiple levels of row expansion using mat-table?