title: Angular virtual scroll: append new items when reaching the end of scroll
body: <p>I would like to use virtual scroll on my Angular application. The items in my list are the result of a remote paged search. I would like to load more results (call the next page) every time I reach the end of the viewport scrolling down.</p>
  
  <p>Here is my template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;cdk-virtual-scroll-viewport itemSize="100"&gt;
          &lt;li *cdkVirtualFor="let item of searchResult"&gt;{{item}}&lt;/li&gt;
      &lt;/cdk-virtual-scroll-viewport&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my attempts to make it to work as I need:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class SearchComponent {
      @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
      searchPageNumber: number;
      searchResults: Array&lt;any&gt;;
  
      constructor(private scrollDispatcher: ScrollDispatcher, private searchService: SearchService) {
          this.searchPageNumber = 0;
          this.searchResults = [];
      }
  
      ngOnInit(): void {
          this.nextSearchPage(this.searchPageNumber);
      }
  
      ngAfterViewInit(): void {
          //this.scrollDispatcher.register(this.scrollable);
          //this.scrollDispatcher.scrolled(1000)
          //    .subscribe((viewport: CdkVirtualScrollViewport) =&gt; {
          //        console.log('scroll triggered', viewport);
          //    });
  
          this.virtualScroll.renderedRangeStream.subscribe(range =&gt; {
              console.log('range', range);
              console.log('range2', this.virtualScroll.getRenderedRange());
              if (this.virtualScroll.getRenderedRange().end % 10 === 0) {
                  this.nextSearchPage(++this.searchPageNumber);
              }
          });
      }
  
      nextSearchPage(pageNumber: number): void {
          this.searchService.getResults(pageNumber).then((pagedResults) =&gt; {
              this.searchResults = this.searchResults.concat(pageResuls);
          });
      }
  }
  </code></pre>
  
  <p>As you can see I can't figure out how to trigger the call to my <code>nextSearchPage</code> function (to load more results) only when the scrollbar reaches the end of the current rendered items in the list.</p>
  
  <p>Do you know how can I do that?</p>
  
  <p>Angular scrolling documentation is poor and it lacks of examples, as stated in this <a href="https://github.com/angular/material2/issues/9594" rel="noreferrer">issue</a> as well.</p>