angular dynamic dropdown change event doesn’t trigger automatically

So I came with issue related to angular dropdowns, I have multiple dropdowns where they are dependent on last dropdowns response. In simple word suppose I have Class - Subject - Part like these tree structure. when I select the Class then the all Subjects inside the Class will appear. but here when there is only on Subject is there in Class then it is get automatically selected and I cant even interact with that option and the next dropdown is depends on these Subject dropdowns value. How to tackle these issue in angular??

<form [formGroup]="addPartsForm" (ngSubmit)="addPart()">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="control">
<label for="board_id">Select Board</label>
<select name="board_id" id="board_id" formControlName="board_id" class="form-control" (change)="onBoardSelectionChange($event, addPartsForm)">
<option [ngValue]="null" disabled selected>Select board</option>
<option *ngFor="let board of boardsAllData" [value]="board.id">{{board.name}}</option>
</select>
<div class="errorMsg" *ngIf="addPartsForm.get('board_id')?.touched && addPartsForm.get('board_id')?.invalid">
<p class="error">Please select a board</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="control">
<label for="class_id">Select Class</label>
<select name="class_id" id="class_id" formControlName="class_id" class="form-control" (change)="onClassSelectionChange($event, addPartsForm)">
<option [ngValue]="null" >Select class</option>
<option *ngFor="let class of classAllData" [value]="class.id">{{class.name}}</option>
</select>
<div class="errorMsg" *ngIf="addPartsForm.get('class_id')?.touched && addPartsForm.get('class_id')?.invalid">
<p class="error">Please select a class</p>
</div>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="control">
<label for="subject_id">Select Subject</label>
<select name="subject_id" id="subject_id" formControlName="subject_id" class="form-control">
<option [ngValue]="null" >Select subject</option>
<option *ngFor="let subject of subjectAllData" [value]="subject.id">{{subject.name}}</option>
</select>
<div class="errorMsg" *ngIf="addPartsForm.get('subject_id')?.touched && addPartsForm.get('subject_id')?.invalid">
<p class="error">Please select a subject</p>
</div>
</div>
</div>
<div class="col-md-6 mt-2">
<div class="control">
<label for="partsName">Enter Part Name</label>
<input type="text" name="partsName" id="partsName" formControlName="part_name" class="form-control" placeholder="Enter part name">
</div>
</div>
<div class="col-md-6 mt-3">
<div class="control">
<label for="description">Enter Part Description</label>
<input type="text" name="description" id="description" formControlName="description" class="form-control" placeholder="Enter part description">
</div>
</div>
</div>
</div>
<div class="card-footer">
<button class="button" mat-flat-button type="button" (click)="addPartsForm.reset()">Clear</button> &nbsp; &nbsp;
<button class="button" mat-flat-button [disabled]="!addPartsForm.valid">Add Part</button>
</div>
</form>

Continue reading...