How to detect change events from datepicker within custom component?

I am trying to create a simple custom component for forms that contains both ngbDatepicker and Timepicker inputs.

How can I detect changes to those inputs? I’ve tried passing change events on the inputs like this:
<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" (change)="onChange($event)">
and
<ngb-timepicker [(ngModel)]="time" (change)="onChange($event)" [meridian]="meridian"></ngb-timepicker>

I’ve also tried using
ngOnChanges(changes: SimpleChange){...}

But the change event is never detected.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.1.2

ng-bootstrap: 4.1.2

Bootstrap: 4.1.2

1 possible answer(s) on “How to detect change events from datepicker within custom component?

  1. @wesleycho ngModelChange only trigger when hour or minute field loses focus.

    Is there any way to invoke ngModelChange on (keyup)?

    User of form may leave the model null if they keep cursor on either (hour or minute) input field.