How to start loop from index 1 instead of index 0 in *ngFor loop in angular?

Question

I am currently getting some data from a dummy api, data from response starts from 1 and the index is currently starting from 0.

How I can start the index loop from 1 instead of 0?

Following the html for *ngFor below:

component.html

       <div class="all-users" >
            <div class="nested-items"  *ngFor="let data of flattenedResponse[0]; let i=index;  " (click)="switchUsers(i)">
                <h4>{{i}}</h4>&nbsp;
                <img src="{{data.image}}" alt="profile">
            </div>
        </div>

Adam Pearson · Accepted Answer · 2023-01-09 09:43:40Z

1

Why not just do the following:

       <div class="all-users" >
        <div class="nested-items"  *ngFor="let data of flattenedResponse[0]; let i=index;  " (click)="switchUsers(i)">
            <h4>{{i + 1}}</h4>&nbsp;
            <img src="{{data.image}}" alt="profile">
        </div>
    </div>

I don't know of a way to change where the index starts, but this way works fine for most cases

answered Jan 9, 2023 at 9:43

Adam Pearson

4042 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dimitar Iv. Jul 11 at 15:55

*ngFor="let data of flattenedResponse[0].slice(1) would do the trick, but overall the data you receive should be cleaned in the backend (more logical)

Toby · Accepted Answer · 2023-01-09 10:45:07Z

1

How I can start the index loop from 1 instead of 0

The correct answer here is... you can't.

So there are some suggestions already, but personally I would avoid hacking your markup to get round the data structure the api returns. It's generally a bad idea to make your markup need to know too much about what your server does.

If the array your api returns is not in the best format for your markup - just create a new data array which is, and point your markup at that. It's best to do this in a service at the point you handle the api result, but if nothing else, do it in your .ts file.

edited Jan 9, 2023 at 10:45

answered Jan 9, 2023 at 10:38

Toby

1,54810 silver badges19 bronze badges

Comments

DEV · Accepted Answer · 2023-01-09 09:53:49Z

0

have you try :

<div class="all-users">
  <div class="nested-items" *ngFor="let data of flattenedResponse[0]; let i=index;  " (click)="switchUsers(i+1)">
    <h4>{{i+1}}</h4>&nbsp; <img src="{{data.image}}" alt="profile">
  </div>
</div>

or you can just skip first element like this :

<div class="nested-items" *ngFor="let data of flattenedResponse[0] | slice:1; let i=index;  " (click)="switchUsers(i)"></div>

edited Jan 9, 2023 at 9:53

answered Jan 9, 2023 at 9:46

DEV

1,7562 gold badges9 silver badges22 bronze badges

Comments

NeNaD · Accepted Answer · 2023-01-09 10:05:52Z

0

You can skip first index explicitly with *ngIf:

<div class="all-users" >
  <div class="nested-items"  *ngFor="let data of flattenedResponse[0]; let i=index;" (click)="switchUsers(i)">
    <ng-container *ngIf="index !== 0">
      <h4>{{i}}</h4>&nbsp;
        <img src="{{data.image}}" alt="profile">
      </div>
    </ng-container>
  </div>
</div>

answered Jan 9, 2023 at 10:05

NeNaD

20.8k11 gold badges65 silver badges119 bronze badges

Collectives™ on Stack Overflow

How to start loop from index 1 instead of index 0 in *ngFor loop in angular?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related