CODEWITHSUNDEEP
angulartypescriptinfinite-scroll
User12_24_4004
User12_24_4004

Reputation: 31

How to show 10 elements at a time using angular2-infinite-scroll module?

I am using angular 2 infinite scroll module,and I want to show 10 elements at a time , when the user hits the scrollDown() ,the next 10 elements have to be shown and the scroll bar should be updated accordingly ,trying various methods but nothing has worked so far,any kind of help would be appreciated. Thanks.

This is my code.

`infinite-scroll
            [infiniteScrollDistance]="2"

            [infiniteScrollThrottle]="500"

            [scrollWindow]="false"
            (scrolled)="onScrollDown()"
            (scrolledUp)="onScrollUp()"

  style="overflow: auto;height:250px;width:350px" >
            <div class="scrollBar">
            <ul *ngFor="let item of list" >
             <li>{{item}}</li>
            </ul>
            </div>`

Upvotes: 0

Views: 1600

Answers (1)

toskv
toskv

Reputation: 31600

You could use the slice pipe in order to limit the items you see on screen.

You'll need a variable to keep the total number of items shown on screen in.

A simple example would look like this:

<div>
  <h2 (click)="limit=limit+2">more</h2>
  <ul>
    <li *ngFor="let item of list | slice:0:limit">{{item}}</li>
  </ul>
  {{limit}}
</div>

You can see it working here.

In your case I guess you could use (scrolled) to increase the limit.

<div infinite-scroll
            [infiniteScrollDistance]="2"

            [infiniteScrollThrottle]="500"

            [scrollWindow]="false"
            (scrolled)="limit=limit+10"
            (scrolledUp)="onScrollUp()"

  style="overflow: auto;height:250px;width:350px" >
            <div class="scrollBar">
            <ul *ngFor="let item of list | slice:0:limit" >
             <li>{{item}}</li>
            </ul>
            </div>

Upvotes: 1

Related Questions