Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 : increment *ngFor by 2 or implementing two paginations with in a Pagination

I am pretty new to Angular and I was wondering if there is any way to increment the ngFor loop by 2 instead of 1.

I am trying to implement two pagination's with in a pagination for which increment the loop by 2 is required.

I am getting objects which have objects with in. Lets say users and list of their address.

(First NgFor is to paginate the users by 2. If I get 15 users. 2 users will be displayed in one page)

li *ngFor="let user of Users | paginate: { itemsPerPage: 1, currentPage: p };let i = index"
{{user[i].firstName}} <--Displaying first userName-->

(Second NgFor is to display list of address of the first user. Lets say he has 20 address. I will be slicing it to 3 or 4 per page and paginate the rest)

 *ngFor="let address of user[i].address| objectValues |slice:addresspageNumber*2-2:addressPageNumber*5 ; let j = index "
<--First child Pagination code-->

 {{user[i+1].firstName}}  <--Displaying second userName-->

(Third NgFor is to display list of address of the second user. Lets say he has 20 address. I will be slicing it to 3 or 4 per page and paginate the rest)

 *ngFor="let address of user[i+1].address| objectValues |slice:addresspageNumber*2-2:addressPageNumber*5 ; let j = index ">
<th scope="row">{{address.streetno}}
<--Second child Pagination code-->

<--Parent Pagination code-->

Now if I dont increment the first ngFor by two, in the next page the second user will be displayed again which I dont want to.

I either have to increment by 2 or implement pagination seperately for two childs which I cant do it in one for loop

All I want is two separate pagination's to be implemented with in one pagination

Object1.name object1.address.street object1.address.pin -- pagination to display other address.

Object2.name object2.address.street object2.address.pin -- second pagination to display other address. --main pagination which on click will show two more object details

like image 836
Compiling Avatar asked Mar 08 '23 14:03

Compiling


1 Answers

For increment by 2

<div *ngFor="let item of items; let even = even;">
  <div *ngIf="even">
    // content
  </div>
like image 131
Viktor Lubinsky Avatar answered May 08 '23 10:05

Viktor Lubinsky