“Expression has changed after it was checked” Angular popup error

Question

I have seen couple of articles about this error, I have went through some but couldn\'t find the solution. Here i am calling alert method when my Boolean is true. The alert

Answer 1

Use ChangeDetectorRef Service to force change Detection

When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

import { Component, Input, ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'component',
  templateUrl: 'component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})


   constructor(cdr:ChangeDetectorRef){} 
   ngAfterViewInit() {
            let controlBlurs: Observable<any>[] = this.formControls
                .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
    // debounceTime(1000)/
            Observable.merge(this.orderUnitForm.valueChanges, ...controlBlurs).subscribe(value => {
                this.displayMessage = this.genericValidator.processMessages(this.orderUnitForm);
               // this.valid = this.genericValidator.validateControls(this.orderUnitForm);
            });
            this.orderUnitForm.valueChanges.debounceTime(1000).subscribe(value => {
                this.valid = this.genericValidator.validateControls(this.orderUnitForm);
                this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);
                  if(this.commaSeparation == true){
                    this.displayModel();
                  }
            });
     this.cdr.detectChanges();
      }