Nested mat-option inside a mat-select

Question

I am new to angular and tried to add a nested mat-options. Is there a way to have a nested mat-option in a mat-option within a mat-select? I need to have a list of which one of the item in the dh list has nested options. I have tried something like this, not sure if this is the right way:

<ng-container matColumnDef="dh">
    <th id="dh" mat-header-cell *matHeaderCellDef mat-sort-header> DH</th>
    <td mat-cell *matCellDef="let row" [formGroup]="row">
        <div *ngIf="selection.isSelected(row); else display">
            <mat-form-field class="small">
                <mat-select formControlName="dh">
                    <mat-option *ngFor="let mType of dhList" [value]="mType">{{mType}}
                        <mat-option *ngFor="let mList of subList" [value]="mList">{{mList}}
                        </mat-option>
                    </mat-option>
                </mat-select>
            </mat-form-field>
        </div>
        <ng-template #display>{{row.get('dc').value}}</ng-template>
    </td>
</ng-container>

How can I get the value of mType in the above, so that based on that value, I display the nested mat-option element?

The dhList for example looks something like [giraffe, horse, bear]. Now subList is the only for bear, and not for all the items in the list. subList like [polar bear, grizzly bear, brown bear]