fix(timepicker): display correct NgModel value inside OnPush component (#3001)

Fixes #2992

Author: maxokorokov

src/timepicker/timepicker.spec.ts

@@ -1,9 +1,9 @@
-import {TestBed, ComponentFixture, async, inject} from '@angular/core/testing';
+import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {createGenericTestComponent} from '../test/common';
 
-import {Component, Injectable} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Injectable} from '@angular/core';
 import {By} from '@angular/platform-browser';
-import {Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms';
 
 import {NgbTimepickerModule} from './timepicker.module';
 import {NgbTimepickerConfig} from './timepicker-config';
@@ -14,6 +14,9 @@ import {NgbTimeStruct} from './ngb-time-struct';
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
+const createOnPushTestComponent = (html: string) =>
+    createGenericTestComponent(html, TestComponentOnPush) as ComponentFixture<TestComponentOnPush>;
+
 function getTimepicker(el: HTMLElement) {
   return el.querySelector('ngb-timepicker');
 }
@@ -78,14 +81,16 @@ function customizeConfig(config: NgbTimepickerConfig) {
 describe('ngb-timepicker', () => {
 
   beforeEach(() => {
-    TestBed.configureTestingModule(
-        {declarations: [TestComponent], imports: [NgbTimepickerModule, FormsModule, ReactiveFormsModule]});
+    TestBed.configureTestingModule({
+      declarations: [TestComponent, TestComponentOnPush],
+      imports: [NgbTimepickerModule, FormsModule, ReactiveFormsModule]
+    });
   });
 
   describe('initialization', () => {
     it('should initialize inputs with provided config', () => {
       const defaultConfig = new NgbTimepickerConfig();
-      const timepicker = new NgbTimepicker(new NgbTimepickerConfig(), new NgbTimeStructAdapter());
+      const timepicker = new NgbTimepicker(new NgbTimepickerConfig(), new NgbTimeStructAdapter(), null);
       expectSameValues(timepicker, defaultConfig);
     });
   });
@@ -1532,6 +1537,18 @@ describe('ngb-timepicker', () => {
           });
     });
   });
+
+  describe('on push', () => {
+
+    it('should render initial model value', async(async() => {
+         const fixture =
+             createOnPushTestComponent(`<ngb-timepicker [ngModel]="{hour: 13, minute: 30}"></ngb-timepicker>`);
+         fixture.detectChanges();
+         await fixture.whenStable();
+         fixture.detectChanges();
+         expectToDisplayTime(fixture.nativeElement, '13:30');
+       }));
+  });
 });
 
 
@@ -1549,6 +1566,10 @@ class TestComponent {
   onSubmit() { this.submitted = true; }
 }
 
+@Component({selector: 'test-cmp-on-push', template: '', changeDetection: ChangeDetectionStrategy.OnPush})
+class TestComponentOnPush {
+}
+
 @Injectable()
 class StringTimeAdapter extends NgbTimeAdapter<string> {
   fromModel(value: string): NgbTimeStruct {

src/timepicker/timepicker.ts

@@ -1,4 +1,12 @@
-import {Component, forwardRef, Input, OnChanges, SimpleChanges, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  ViewEncapsulation
+} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 
 import {isInteger, isNumber, padNumber, toInteger} from '../util/util';
@@ -156,7 +164,9 @@ export class NgbTimepicker implements ControlValueAccessor,
    */
   @Input() size: 'small' | 'medium' | 'large';
 
-  constructor(private readonly _config: NgbTimepickerConfig, private _ngbTimeAdapter: NgbTimeAdapter<any>) {
+  constructor(
+      private readonly _config: NgbTimepickerConfig, private _ngbTimeAdapter: NgbTimeAdapter<any>,
+      private _cd: ChangeDetectorRef) {
     this.meridian = _config.meridian;
     this.spinners = _config.spinners;
     this.seconds = _config.seconds;
@@ -177,6 +187,7 @@ export class NgbTimepicker implements ControlValueAccessor,
     if (!this.seconds && (!structValue || !isNumber(structValue.second))) {
       this.model.second = 0;
     }
+    this._cd.markForCheck();
   }
 
   registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }