How to reset a dropdown menu and make it select default option? - angular5

Question

I have multiple number of dropdown menu like below. List of second menu is dependent to first and so on.
<select [(ngModel)]="firstModel" id="first" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of second" [value]="item">{{item}}</option>
</select>
<br>
What I need is Lets say if the user choose data from second menu then the menu coming after second one should select 'select a category' option
I have tried following code:
ChangeDropdown = (value,dropdownName) => {
if(dropdownName == 'second') {
this.secondModel = null;
this.thirdModel = null;
this.fourModel = null;
}
This is not selecting that select a category option instead it makes menu blank.

Answer 1

In Angular mat-select
In Ts file
import {Component} from '#angular/core';
#Component({
selector: 'select-value-binding-example',
templateUrl: 'select-value-binding-example.html',
styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
firstModel = '';
secondModel = '';
thirdModel = '';
ChangeDropdown (eventInfo) {
console.log(eventInfo)
if(eventInfo.source._id == 'second') {
this.secondModel = '';
this.thirdModel = '';
}
}
}
In Html File
<mat-form-field>
<mat-select id="first" [(ngModel)]="firstModel" (selectionChange)="ChangeDropdown($event)">
<mat-option value="" disabled>Select categor</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-select id="second" [(ngModel)]="secondModel" (selectionChange)="ChangeDropdown($event)">
<mat-option value="" disabled>Select category</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field>
<mat-select id="third" [(ngModel)]="thirdModel" (selectionChange)="ChangeDropdown($event)">
<mat-option value="" disabled>Select category</mat-option>
<mat-option value="option1">Option 1</mat-option>
<mat-option value="option2">Option 2</mat-option>
<mat-option value="option3">Option 3</mat-option>
</mat-select>
</mat-form-field>