Textbox value not updated on UI with OnPush Strategy

[ankit-11tyagi]

I am using ng2-completer in a component with OnPush change detection strategy. When i update the value of completer's ngModel, it does not reflect on UI. Only when i manually focus on input box, value gets updated. I have also tried calling markforcheck() and detectChanges() manually after updating the value but no luck. Please let me know if i am missing anything here.

import { Component, OnChanges, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CompleterService } from 'ng2-completer';

@Component({
  selector: 'app-root',
  template: `
  <ng2-completer [(ngModel)]="colorCode" [dataService]="dataService" [minSearchLength]="0"></ng2-completer>  
  <button (click)="updateValue()" >Trigger change detection</button>              
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent   {

  dataService;
  colorCode = "default";

  constructor(
    completerService: CompleterService,
    private cdr: ChangeDetectorRef
    ) {
    this.dataService = completerService.local([
      'red',
      'green',
      'blue',
      'cyan',
      'magenta',
      'yellow',
      'black'
            ]);
  }

  updateValue(){
    this.colorCode = "red";
    this.cdr.detectChanges();
  }

}

[leae-e]

Do you remember what the solution to the problem was? I came across this just now Thanks