[SOLVED] Angular: cdkVirtualFor not rendering new items


I’m building a vertically scrolling calendar. I’m getting the initial days to load, but when new days are added to the list, they aren’t being rendered.

    *cdkVirtualFor="let day of days; trackBy: trackByFn"
<button (click)="goToToday()">go</button>

I have a service with a BehaviorSubject updating the days. I know the list of days is being updated, but the change doesn’t seem to be detected.

  ngOnInit() {
    this._daysService.days$.subscribe(days => {
      this.days = days;

For more info, the StackBlitz repo is public https://stackblitz.com/edit/material-infinite-calendar


I figured this out.

Originally, I was adding new days by grabbing the current value like this

let items = this.items$.value;

Apparently, this is actually a mutation of the value of the BehaviorSubject‘s value, therefore not creating a new array to return and not triggering change detection.

I changed it to

let items = [...this.items$.value];

and all is good.

So, although the answers here are correct in that I was mutating the original array, the information I needed was calling next() with a mutated version BehaviorSubject‘s current value does not emit a new array. An emit event does not guarantee immutability.

Answered By – Will Luce

Answer Checked By – Mary Flores (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *