CODEWITHSUNDEEP
angular
Thinker
Thinker

Reputation: 5366

Angular2 limit list elements to specific number

I have a list populated as material cards. As the list can grow big, I want it to limit to 5 elements at a time and then have the user an option to see next elements (pagination?). 

<div class="goal-list-card" *ngFor="let task of tasks| values; let j = index;"
[ngClass]="{'active': selectedTask == task.taskId}">
<div class="strip"></div>
<div class="card-title">
    <p>{{task.what}}</p>
</div>
<div class="card-action-button">
    <button (click)="editTask(task)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
        Edit
    </button>
</div>

And it looks like following:

enter image description here

How can I achieve it?

Upvotes: 0

Views: 57

Answers (1)

Jayakrishnan
Jayakrishnan

Reputation: 4294

You can use slice pipe and have start and end as your pagination variable at component side:

<div class="goal-list-card" *ngFor="let task of tasks| values |slice:start:end; let j = index;"[ngClass]="{'active': selectedTask == task.taskId}">
    <div class="strip"></div>
     <div class="card-title">
       <p>{{task.what}}</p>
      </div>
       <div class="card-action-button">
           <button (click)="editTask(task)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
    Edit
      </button>
 </div>

set values of start and end in any user event say (click).

Upvotes: 1

Related Questions