title: Angular cdk scrolling: Updating Data Source not represented in view
body: <p>All my previous attempts of building an infinite scroller failed so far.
  The component I am currently working on uses Angular's virtual scrolling and should update the data source when a certain index of the virtual scroll viewport is reached.
  While the BehaviorSubject does indeed get updated, i cannot see the new version in the view.</p>
  
  <p>My component looks like this:</p>
  
  <pre><code>import {Day, Month, Selected, Weekday} from './datepicker';
  import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';
  import {BehaviorSubject} from 'rxjs';
  
  @Component({
    selector: 'app-calendar-datepicker',
    templateUrl: './calendar-datepicker.component.html',
    styleUrls: ['./calendar-datepicker.component.scss']
  })
  export class CalendarDatepickerComponent implements OnInit {
    months: BehaviorSubject&lt;any[]&gt; = new BehaviorSubject&lt;any[]&gt;([]);
  
    previousScrollIndex: number;
  
    @ViewChild('dateScroller') dateScroller: CdkVirtualScrollViewport;
  
    constructor() {
    }
  
    ngOnInit() {
      /*initialization of the array*/
      const initialMonths = [];
      const month = new Month(this.currentDate);
      const date = moment(this.currentDate);
      const nextMonth = new Month(date.add(1, 'M'));
      const nextDate = moment(date);
      const monthAfterNextMonth = new Month(nextDate.add(1, 'M'));
      initialMonths.push(month);
      initialMonths.push(nextMonth);
      initialMonths.push(monthAfterNextMonth);
      this.months.next(initialMonths);
    }
  
    public onScroll(index) {
      if (typeof(this.previousScrollIndex) === 'undefined') {
        this.previousScrollIndex = index;
      } else if (this.previousScrollIndex &lt; index) {
        if (index % 2 === 0) {
          this.dateScroller.scrollToIndex(index);
        } else {
          this.dateScroller.scrollToIndex(index + 1);
  
          /*This is the place where the BehaviorSubject is updated*/
          const date = moment(this.months.value[index].date);
          const monthToFetch = new Month(date.add(2, 'M'));
          const fetchedMonths = this.months.value;
          fetchedMonths.push(monthToFetch);
          this.months.next(fetchedMonths);
        }
        this.previousScrollIndex = index;
      } else {
        if (index % 2 === 0) {
          this.dateScroller.scrollToIndex(index);
        } else {
          this.dateScroller.scrollToIndex(index - 1);
        }
       this.previousScrollIndex = index;
      }
    }
  }
  </code></pre>
  
  <p>And the view is as follows:</p>
  
  <pre><code>&lt;cdk-virtual-scroll-viewport itemSize="92" #dateScroller class="scroll-container"
                               (scrolledIndexChange)="onScroll($event)"&gt;
    &lt;div *cdkVirtualFor="let month of months | async"&gt;
      &lt;div class="month"&gt;{{month.date.format('MMMM')}}&lt;/div&gt;
      &lt;div class="days"&gt;
        &lt;div class="day previousMonth" *ngFor="let prevMonthDay of month.prevMonthDays"&gt;&lt;/div&gt;
        &lt;div class="day" *ngFor="let day of month.monthDays" (click)="onSelect(day)"
             [ngClass]="{ 'selected': day.selected, 'past': day.past, 'today': day.today,
         'first': day.firstSelected &amp;&amp; isRangeSelected, 'last':day.lastSelected,
         'onlyOneSelected': day.firstSelected &amp;&amp; !isRangeSelected}"&gt;
          &lt;span *ngIf="day.firstSelected || day.lastSelected" class="borderDay"&gt;&lt;/span&gt;
          &lt;span class="dayText"&gt;{{day.number}}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/cdk-virtual-scroll-viewport&gt;
  </code></pre>
  
  <p>So far I have tried using the ChangeDetectorRef and triggering it manually or putting my code to update <code>months</code> in a <code>setTimeout()</code>-function, but neither did work.</p>