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]
