Subscribe method throws ExpressionChangedAfterItHasBeenCheckedError error in ngbModal

Question

I am showing a component inside ngbModal. It works fine but as soon as it subscribe to an API, it throws ExpressionChangedAfterItHasBeenCheckedError.

I have checked similar questions, most of them are about reactive forms and has a workaround to either setTimeOut() or mark ngModel as touched - none of them are working in this case.

Is there any other workaround available?

Answer 1

The following workaround works for me.

In ngAfterViewChecked() add the line this.cdr.detectChanges() to detect changes.

See code except below:

import { Component, OnInit, ChangeDetectorRef, AfterViewChecked } 
    from '@angular/core';

constructor(
    ..
    private cdr: ChangeDetectorRef, 
}

ngAfterViewChecked()
{
    this.cdr.detectChanges(); 
}