fix(timepicker): add exportAs property for ngbTimepicker (#3980)

Author: StereoMissile

src/timepicker/timepicker.spec.ts

@@ -183,7 +183,6 @@ describe('ngb-timepicker', () => {
        }));
   });
 
-
   describe('model updates in response to increment / decrement button clicks', () => {
 
     it('should increment / decrement hours', fakeAsync(() => {
@@ -1623,6 +1622,32 @@ describe('ngb-timepicker', () => {
          expectToDisplayTime(fixture.nativeElement, '13:30');
        }));
   });
+
+  describe('on export', () => {
+
+    it('should change active time by calling change on an exported directive instance', fakeAsync(() => {
+         const html = `
+        <ngb-timepicker #myTimepicker="ngbTimepicker" [ngModel]="model"></ngb-timepicker>
+        <button type="button" id="hours" (click)="myTimepicker.changeHour(1)"></button>
+        <button type="button" id="minutes" (click)="myTimepicker.changeMinute(1)"></button>`;
+
+         const fixture = createTestComponent(html);
+         fixture.componentInstance.model = {hour: 1, minute: 23, second: 45};
+         fixture.detectChanges();
+         tick();
+         fixture.detectChanges();
+
+         const buttonChangeHours = fixture.nativeElement.querySelector('#hours') as HTMLButtonElement;
+         buttonChangeHours.click();
+         fixture.detectChanges();
+         expectToDisplayTime(fixture.nativeElement, '02:23');
+
+         const buttonChangeMinutes = fixture.nativeElement.querySelector('#minutes') as HTMLButtonElement;
+         buttonChangeMinutes.click();
+         fixture.detectChanges();
+         expectToDisplayTime(fixture.nativeElement, '02:24');
+       }));
+  });
 });
 
 

src/timepicker/timepicker.ts

@@ -21,6 +21,7 @@ const FILTER_REGEX = /[^0-9]/g;
  * A directive that helps with wth picking hours, minutes and seconds.
  */
 @Component({
+  exportAs: 'ngbTimepicker',
   selector: 'ngb-timepicker',
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./timepicker.scss'],
@@ -209,21 +210,33 @@ export class NgbTimepicker implements ControlValueAccessor,
 
   setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; }
 
+  /**
+   * Increments the hours by the given step.
+   */
   changeHour(step: number) {
     this.model ?.changeHour(step);
     this.propagateModelChange();
   }
 
+  /**
+   * Increments the minutes by the given step.
+   */
   changeMinute(step: number) {
     this.model ?.changeMinute(step);
     this.propagateModelChange();
   }
 
+  /**
+   * Increments the seconds by the given step.
+   */
   changeSecond(step: number) {
     this.model ?.changeSecond(step);
     this.propagateModelChange();
   }
 
+  /**
+   * Update hours with the new value.
+   */
   updateHour(newVal: string) {
     const isPM = this.model ? this.model.hour >= 12 : false;
     const enteredHour = toInteger(newVal);
@@ -235,11 +248,17 @@ export class NgbTimepicker implements ControlValueAccessor,
     this.propagateModelChange();
   }
 
+  /**
+   * Update minutes with the new value.
+   */
   updateMinute(newVal: string) {
     this.model ?.updateMinute(toInteger(newVal));
     this.propagateModelChange();
   }
 
+  /**
+   * Update seconds with the new value.
+   */
   updateSecond(newVal: string) {
     this.model ?.updateSecond(toInteger(newVal));
     this.propagateModelChange();