NGRX filter causing ExpressionChangedAfterItHasBeenCheckedError

Question

I'm using an NGRX filter on a selector to filter the items in a list based on the state value for the filter.. When the page first loads, no problems. If I refresh the page I get an ExpressionChangedAfterItHasBeenCheckedError error. If I remove/comment the filter portion, the error goes away. Is there any way to do selector filtering without causing this error?

export const getRatings = (state: MyState) => state.ratings
    .filter(rating =>
        state.filterByText === '' ||
        rating.name.toLowerCase().includes(state.filterByText.toLowerCase())
    );

Use in the component

ngOnInit() {
  this.ratings$ = this.store.select(myState.getRatings);
}

Use in html

<sb-rating-cards [ratings]="ratings$ | async"></sb-rating-cards>

Answer 1

With help of RxJs you can transform Observable how ever you want (make it cold, hot, replay etc.). Change Detection is triggered if Input Observable emits, so it makes me think that Angular component is designed to take Observable as an input, but not a live stream.

And this is a known issue (if you can call it so).

One suggests to add a pipe(delay(0)), what might be a fast way to solve it (but in real life it might bring you problems, if it takes some time to build, because delay(0) is similar to setTimeout - it runs on async scheduler, which runs in macro task queue (just like setTimeout)).

Otherwise, pass Observable as it is and subscribe in child component, where you also manage unsubscribing when destroyed.