I'm in the process of developing a menu that begins with the user selecting a date, followed by choosing an option from a dropdown menu.
The dropdown menu values are fetched from a database using an API call, which is functioning properly. However, these options are dynamic and change based on the selected date. My challenge lies in finding a way to trigger the API call ('getOptions' -> for fetching the list of values) once the user picks a date.
Any guidance on this matter would be greatly appreciated. Below is the code snippet. Thank you!
HTML
<div class="row">
<div class="col-md-4">
<p class="word">Date:</p>
</div>
<div class="col-md-8">
<input class="form-control" type="date" id="start" name="trip-start" [(ngModel)]=selectedDate>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p class="word">Options:</p>
</div>
<div class="col-md-8">
<select name="Template" class="form-control">
<option>- -Select Template- -</option>
<option *ngFor="let x of optionsAvailable">{{ x.Value }}</option>
</select>
</div>
</div>
TS
selectedDate = '';
optionsAvailable: any = {};
constructor(
private commonService: CommonService
) { }
ngOnInit() {
}
getOptions() {
this.commonService.getOptions(this.selectedDate).subscribe(
data => {
this.optionsAvailable= [];
for (let x = 0; x < data['data'].length; x++) {
this.optionsAvailable.push({
Id: data['data'][x][0],
Value: data['data'][x][1]
});
}
},
);
}