Have two selectboxes, if we select item in first select box and select one option in second select box. And If we select another option in first select box, need to reset back to default value like 'Select Time'. I tried using below code, I can able to select but unable to reset to back to default value, still selecting previously selecting value.
public validTime = ['8', '9', '10', '11', '12', '1', '2', '3', '4'];
public validTimeOptions = this.validTime;
output = "....";
selectedFood: string;
foods = [
{value: 'product10', viewValue: 'Monday'},
{value: 'product20', viewValue: 'Tuesday'},
{value: 'product30', viewValue: 'Wednesday'},
{value: 'product40', viewValue: 'Thursday'},
{value: 'product40', viewValue: 'Friday'},
];
onFoodSelection() {
this.output = this.selectedFood;
this.validTime = this.validTime;
}
HTML:
<select placeholder="Favorite food" [(ngModel)]="selectedFood" (ngModelChange)="onFoodSelection()">
<option *ngFor="let food of foods" [value]="food.value">
{{ food.viewValue }}
</option>
</select>
<select id="suspensionTime" class="kite-form-control" (click)="changeTimeUpdate()">
<option [ngValue]="null" selected disabled>Select Time</option>
<option *ngFor="let time of validTimeOptions" [ngValue]="time">{{ time }}</option>
</select>
You need to link suspensionTime select with an ngModel in order to update the value on day change.
// app.component.ts
selectedTime: string;
onFoodSelection() {
this.output = this.selectedFood;
this.validTime = this.validTime;
this.selectedTime = null;
}
// app.component.html
<select id="suspensionTime" class="kite-form-control" (click)="changeTimeUpdate()"
[(ngModel)]="selectedTime">
Check this Stackblitz.