Within my Angular app, there are two dropdowns that I have integrated:
<div class="input-group">
<input
id="startDate"
type="text"
class="form-control"
aria-label="Start date"
dlDateTimeInput
[ngModel]="startDate"
/>
<div ngbDropdown class="d-inline-block">
<div class="input-group-append">
<button
class="btn btn-outline-primary"
id="startDateDropdown"
ngbDropdownToggle
>
<i class="oi oi-calendar"></i>
</button>
<div ngbDropdownMenu aria-labelledby="startDateDropdown">
<div style="width: 360px">
<dl-date-time-picker
[(ngModel)]="startDate"
(change)="startDateSelected($event)"
minuteStep="15"
>
</dl-date-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="input-group">
<input
id="endDate"
type="text"
class="form-control"
aria-label="End date"
dlDateTimeInput
[ngModel]="endDate"
/>
<div ngbDropdown class="d-inline-block">
<div class="input-group-append">
<button
class="btn btn-outline-primary"
id="endDateDropdown"
ngbDropdownToggle
>
<i class="oi oi-calendar"></i>
</button>
<div ngbDropdownMenu aria-labelledby="endDateDropdown">
<div style="width: 360px">
<dl-date-time-picker
[(ngModel)]="endDate"
(change)="endDateSelected($event)"
minuteStep="15"
>
</dl-date-time-picker>
</div>
</div>
</div>
</div>
</div>
I've been attempting to resolve the issue of closing the dropdown menu using this code snippet:
import { ViewChild } from "@angular/core";
import { NgbDropdown } from "@ng-bootstrap/ng-bootstrap";
[...]
export class ParentComponent {
@ViewChild(NgbDropdown)
private dropdown: NgbDropdown;
public startDateSelected(event: DlDateTimePickerChange<Date>): void {
this.startDatePicked.emit(event.value);
this.dropdown.close();
}
public endDateSelected(event: DlDateTimePickerChange<Date>): void {
this.endDatePicked.emit(event.value);
this.dropdown.close();
}
}
The Issue at Hand
The predicament lies in the fact that only the first dropdown closes while the second remains open.
How can one go about simultaneously closing both the start and end dropdowns?