Prevent Expression Changed After it has been Checked Error?

Question

I know why i am getting the Expression Changed After it has been checked error but i cannot prevent it .

Scenario

I have a Component that has a ngxDatatable we manipulate the Datatable to take up width of a div based on certain condition what happens is that the re rendering of the data grid dosent happen for some odd reason as it happens in the same Event loop. So what we end up doing is that when ever we get a resize event from our datagrid component we capture that in a custom directive and emit a event that will then call the datatable recalulate event . This makes the rerendering problem go away but then this Expression checked problem arisies .

Here the watchValueChange is the directive Input and selector and grid is the ngx datatable component where as the container Div is the view Child for the whole parent div i:e h-1oo

The thing is that the offset width is changing too fast before the cd can act on it and it causes the error . I tried to make use of Observable.of in the component to take the latest value and not take all values of the change but none work any idea please help

what i tried

@Directive({
  selector: '[watchValueChange]'
})
export class watchDirective {

  @Output() onValueChange = new EventEmitter<any>();
  @Input('watchValueChange') public valueChange: any = null;

  private changeEvent: Subject<any> = new Subject<any>();

  constructor(private elRef: ElementRef) {}

  ngOnInit() {
    Observable.of(this.valueChange).debounceTime(100).subscribe(data => this.onValueChange.emit(data));
    /*this.changeEvent.asObservable().debounceTime(300).subscribe(value => {
      this.onValueChange.emit(value);
    });*/
  }

  ngOnChanges(changes){
    //this.changeEvent.next(this.valueChange);
  }
}

Possible duplicate of [Expression \_\_\_ has changed after it was checked](https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked) — msanford, Feb 15 '18 at 14:50

score 0 · Answer 1 · answered Feb 15 '18 at 14:43

This error essentially happens when an event triggers a document change detection, then, while that detection is running, you trigger something else that should trigger a change. But since Angular is currently running the change detection and you changed something before it had the chance to finish, you get that error. There are a few ways to fix this. I don't know enough about your situation to say which way is best for you. You could change your logic so that the change is emitted afterwards. Or you can inject Angular's ChangeDetectorRef and then use the markForCheck() method after the change you are making so that Angular knows to go and check for changes again. Or, you could set the change to occur in a setTimeout so that the change is forced to occur after Angular has finished checking for changes, and thus trigger another change detection cycle.

constructor(private changeDetectorRef: ChangeDetectorRef) { }

After change:

   ..method that causes change to DOM
    this.changeDetectorRef.markForCheck();

or:

setTimeout(() => {
  ..method that causes change to DOM:
}, 0);

there is no method that causes the chnage in dom it is like it will get triggered when ever width is changed automatically — INFOSYS, Feb 16 '18 at 05:52

Prevent Expression Changed After it has been Checked Error?

1 Answers1