Take a look at this demo:
@Component({
selector: 'my-app',
template: `
<div>
<h1>{{ foo }}</h1>
<bpp [(foo)]="foo"></bpp>
</div>
`,
})
export class App {
foo;
}
@Component({
selector: 'bpp',
template: `
<div>
<h2>{{ foo }}</h2>
</div>
`,
})
export class Bpp {
@Input('foo') foo;
@Output('fooChange') fooChange = new EventEmitter();
ngAfterViewInit() {
const possiblyAsyncObservable = Observable.of(null);
possiblyAsyncObservable.subscribe(()=> {
this.fooChange.emit('foo');
})
}
}
There's an occasional error that pops up:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'foo'
This error occurs because the two-way binding is updated by an observable that can return a value in the same tick. I'd rather not use a setTimeout workaround as it seems like a hack and complicates the logic.
How can we prevent this error from happening?
Is the
ExpressionChangedAfterItHasBeenCheckedError