title: Angular 4 with ngx infinite scroll
body: <p>I am trying to add an infinite scroll with <a href="https://github.com/orizens/ngx-infinite-scroll" rel="nofollow noreferrer">ngx-infinite-scroll</a> in my Angular 4 project.  </p>
  
  <p>The array data has about <strong>800</strong> posts which are from API. </p>
  
  <p>Initially, I want to display 20 posts and every single time the page is scrolled, it will display 20 more posts. </p>
  
  <p>Currently, I can see the console log message <strong>(scrolled!)</strong> whenever I scroll down.    </p>
  
  <p>But I can't figure out how to append 20 posts into the table when it's scrolled.</p>
  
  <p>This is the codes that I am trying.</p>
  
  <p><strong>onScrollDown</strong> function    </p>
  
  <pre><code>onScrollDown(){        
    this.dataService.getPosts().subscribe((posts)=&gt;{
        for (let post of posts){
         let data = '&lt;tr&gt;&lt;td&gt;'+ post.title +'&lt;/td&gt;&lt;td&gt;'+ post.geo +'&lt;/td&gt;&lt;td&gt;'+ post.Telephone +'&lt;/td&gt;&lt;td&gt;'+ post.category +'&lt;/td&gt;&lt;td&gt;Detail&lt;/td&gt;&lt;/tr&gt;';
         $('table.feed tbody').append(data);
        }
  });
  </code></pre>
  
  <hr>
  
  <p>.</p>
  
  <p>This is the component codes.<br>
  <strong>posts.component.html</strong></p>
  
  <pre><code>    &lt;div *ngIf="posts?.length &gt; 0;else noPosts" class="search-results" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScrollDown()" [scrollWindow]="false"&gt;
          &lt;table class="responsive-table feed striped"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;State/City&lt;/th&gt;
                      &lt;th&gt;Phone&lt;/th&gt;
                      &lt;th&gt;Category&lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor="let post of posts | filter:term"&gt;
                      &lt;td&gt;{{post.title}}&lt;/td&gt;
                      &lt;td&gt;{{post.geo}}&lt;/td&gt;
                      &lt;td&gt;{{post.Telephone}}&lt;/td&gt;
                      &lt;td&gt;{{post.category}}&lt;/td&gt;
                      &lt;td&gt;Detail&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>posts.component.ts</strong></p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
      import { DataService } from '../../services/data.service';
      import { FilterPipe } from '../../filter.pipe';
      declare var jquery:any;
      declare var $ :any;
  
      @Component({
        selector: 'feed',
        templateUrl: './feed.component.html',
        styleUrls: ['./feed.component.css']
      })
  
      export class FeedComponent implements OnInit {
  
      term : '';
      posts: Post[];
  
        constructor(private dataService: DataService) { }
  
        ngOnInit() {
            this.dataService.getPosts().subscribe((posts)=&gt;{
                this.posts = posts.slice(0,10);
            });
        }
  
      onScrollDown(){     
           console.log("scrolled!");   
      }
  
      interface Post{
          id:number, 
          title:string,
          contact:string,
          Address:string,
          Telephone:number,
          Email:string, 
          Website:string, 
          Establishment:string,
          sector:string,
          category:string,
      }
  </code></pre>