I’m trying to display a select item underneath a checkbox in Angular, which is included in a selection list:

<mat-selection-list>
    <mat-list-option 
        *ngFor="let checkbox of checkboxes" 
        color="primary" 
        checkboxPosition="before"
        [value]="checkbox" 
        [selected]="isCheckboxChecked(checkbox)" 
        (click)="changeCheckboxState(checkbox)"
    >
        <span class="extense-text">{{ checkbox.label }}</span>

        <div *ngIf="checkbox.label === 'Checkbox 3'">
        <mat-form-field>
            <mat-label>Choose an option</mat-label>
            <mat-select [(value)]="selectedOption" (selectionChange)="selectOption($event.value)">
                <mat-option *ngFor="let option of options" [value]="option">
                    {{option}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        </div>
    </mat-list-option>
</mat-selection-list>

However, this is how it looks:

I can also set the select component at the bottom, but it doesn’t seem natural to me:

<mat-selection-list>
    <mat-list-option 
        *ngFor="let checkbox of checkboxes" 
        color="primary" 
        checkboxPosition="before"
        [value]="checkbox" 
        [selected]="isCheckboxChecked(checkbox)" 
        (click)="changeCheckboxState(checkbox)"
    >
        <span class="extense-text">{{ checkbox.label }}</span>
    </mat-list-option>
</mat-selection-list>

<div *ngFor="let checkbox of checkboxes">
    <div *ngIf="checkbox.label === 'Checkbox 3'">
        <mat-form-field>
            <mat-label>Choose an option</mat-label>
            <mat-select [(value)]="selectedOption" (selectionChange)="selectOption($event.value)">
                <mat-option *ngFor="let option of options" [value]="option">
                    {{option}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

Is there any way to do what I’m looking for? Thanks!