title: Angular4 - Show next 5 items in array through click
body: <p>I have an array filled with TV shows. TV shows which I have watched recently:</p>
  
  <pre><code>tvShows = ['Firefly', 'Fargo', 'Game of Thrones', 'Breaking Bad', 'The Sopranos', 'House of Cards', 'Prison Break'];
  </code></pre>
  
  <p>As you can see, the array contains more than 5 items. So I did this to show only 5 tv shows:</p>
  
  <pre><code>&lt;div class="tvShow_row" *ngFor="let tvShowName of (tvShows | slice:tvShows.length - 5)"&gt;
      &lt;span class="tvShow_name"&gt;{{tvShowName}}&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I want to have a simple button for displaying the next 5 items in the array together with my current 5 items. Obviously, the list gets longer based on the items in the array, but the principle is to show the next 5. The problem is, I don't know how to load the next 5 items from my array. Also, if I don't have 5 (because there are 7 items in the array for example), then I still want to show the rest of the array. I tried showing more items by printing the array, but then it only shows the first 5 items again, which makes sense, I guess. Does anybody know how to tackle this problem?</p>