Search code examples
arraysangularitems

Angular4 - Show next 5 items in array through click

I have an array filled with TV shows. TV shows which I have watched recently:

tvShows = ['Firefly', 'Fargo', 'Game of Thrones', 'Breaking Bad', 'The Sopranos', 'House of Cards', 'Prison Break'];

As you can see, the array contains more than 5 items. So I did this to show only 5 tv shows:

<div class="tvShow_row" *ngFor="let tvShowName of (tvShows | slice:tvShows.length - 5)">
    <span class="tvShow_name">{{tvShowName}}</span>
</div>

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?

Solution

  • Maybe something like this:

    *ngFor="let item of items | slice:0:[max]"

toggle(): void {
  this.max = this.max + 5;
}

    So setting max will show more items in the array. Without copying array and other stuff.