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

Question

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

Collaborate

Answer 1

For increment by 2

<div *ngFor="let item of items; let even = even;">
  <div *ngIf="even">
    // content
  </div>

Johannajohannah

Answer 2

I don't think you can increment *ngFor by 2 because it's purpose is to display an array-kind data; plus I don't really understand your requirements.

However you can use *ngIf in a combination with % operator in order to not react on every second entry.

This could do the job

<li *ngFor="let item of items; let i = index">
  <span *ngIf="i % 2 === 0"> // or <ng-template if it is better here>

The same effect could be achieved for any iteration size. Just replace the 2 with e.g. 10 to increment by 10.

False

You can also use [ngSwitch} if things get more complex. An example is here: angular-2-training-book.rangle.io/handout/directives/… – Gentilism

@Gentilism it does not make any sense here... Does it? – False

Not for this particular use case.. But I was thinking of others who would come to thread later, with similar problems, that needed 3 or more variations... maybe re-rendering header, header+ description, header+description+narrative etc... – Gentilism

*ngIf="i % 2 === 0 would not help because I want to display both the records in that page. with this condition, page two will not display any records and page 3 will display two records like one. – Collaborate

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 – Collaborate