Angular start ngFor index from 1

Question

Is it possible to start ngFor index from 1 instead of 0?

let data of datas;let i=index+1

didn't work.

Albuquerque

why you want the same may i know ? or please elaborate your question bit more – Quebec

You can't use + operator in ngFor but you can use it inside the body with i. see @Taylor response below. – Oneill

What about this? – Infantry

Answer 1

 *ngFor="let item of items | slice:1; let i = index;

SlicePipe

Whale

@ BBaysinger Who is Rad? – Whale

This is removing data from end. Is there any way to slice from both end? – Napoleon

For now I am using *ngIf to achieve it(Is it recommended one?), or I can use custom pipe. But, why 'slice' pipe is working unexpected for me? – Napoleon

slice pipe is returning a subset of the initial "items" set. This means that it is not the index starting from 0, but the items list starting from the second element in the set. – Restrictive

Answer 2

There are 2 possible answers to the question, depending on what was actually being asked.

If the intent is to skip the first element of the array, then the answers involving slice are in the right direction.

However, if the intent is to simply shift the index while still iterating over all of the array, then slice is NOT the correct approach, as it will skip the 0th element in the array, thereby outputting only n-1 items from an array of length n.

@Taylor gave a real-world example of when the index might need to be shifted for display purposes, such as when outputting a list where the first entry should read 1, not 0.

Here's another similar example:

<li *ngFor="let book of books; let i = index">
    {{ i + 1 }}.  {{ book.title }}
</li>

which would produce output like:

1. Sample Book Title

2. Another book title

...

Windbreak

Imo that's a bad example. You use an ordered list in HTML and use the index to show the number of the item in the list .. CSS gives you that by default :) – Pluckless

Of course, there are easier/better ways to make a numbered list. However, this example was intentionally chosen for its clarity, and to maintain focus on the question raised (which is not about numbered lists). – Windbreak

Best one. Easy and Quick – Kirshbaum

this is the best answer because 1. skipping the 1st item in the list when reading in json from a network request only equals incomplete data, 2. the complaint that ol is not the correct html assumes I have full control over that (not always true). just needed a quick way to number questions from 1 and up. – Griff

Answer 3

That's not possible, but you could use Array.prototype.slice() to skip the first element:

<li *ngFor="let item of list.slice(1)">{{ item }}</li>

The SlicePipe is also an option if you prefer that syntax:

<li *ngFor="let item of items | slice:1">{{ item }}</li>

Description

All behavior is based on the expected behavior of the JavaScript API Array.prototype.slice() and String.prototype.slice().

When operating on an Array, the returned Array is always a copy even when all the elements are being returned.

If you also need the index to match, just add the number of elements you skipped to it:

<li *ngFor="let item of list.slice(1); let i = index">{{ i + 1 }} {{ item }}</li>

Or:

<li *ngFor="let item of items | slice:1; let i = index">{{ i + 1 }} {{ item }}</li>

Anyway, if you need to put too much logic in the template to make this work for your use case, then you should probably move that logic to the controller and just build another array with the exact elements and data that you need or cache the sliced array to avoid creating a new one if the data hasn't changed.

Bignoniaceous

Answer 4

  <li *ngFor="let info of data; let i = index">
    {{i + 1}} {{info.title}}
  </li>

Reedbuck

Answer 5

This works fine for me. With single quote

*ngFor="let data of datas; let i = 'index+1'";

In this way I don't remove any data from the array datas and at the same time the index starts from 1 and it ends to datas length.

Mendoza

This should be the top answer! It actually works without slicing off any of the array! – Neal

Answer 6

You can't at least for now, it seems the team behind angular 2 is trying to keep ngFor really simple, there's a similar issue opened on Angular 2 repo about doing multiple assigning of the index and the answer was:

syntax has to be simple for tools to support it.

Bunion

Answer 7

We can approach it like the below for custom tags/default tags:

 <custom-tag *ngFor="let item of items; let i = index" [text]="Item + getIndex(i)"></custom-tag>

In Javascript:

function getIndex(i) {return Number(i + 1).toString();}

Asaasabi

I used to approach this with {{ i + 1 }} and it worked fine for a while. Just recently started getting errors about i not being a numeric, and so this approach is working for me now – Ingvar

Answer 8

I am using let i = index in *ngFor class. As it is start from 0th element, so I am using here {{i+1}} instead of {{i}}, it will skip the 0th element in the array. It works fine for me...

<ion-row *ngFor="let key of ques; let i = index">
  <ion-text>{{i+1}}) {{key.question}}</ion-text>

Chamois

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Sirenasirenic

Answer 9

You can wrap it around a div then use *ngIf="i != selectedIndex" like this:

 <div *ngFor="let item of yourArray; let i = index">
     <div *ngIf="i != selectedIndex"> {{ item }} </div>
 </div>

where selectedIndex is the item index you want to remove

Artiodactyl

Answer 10

I did something as below, skipping the index 0 ...

<div *ngFor="let option of options; let i=index">
  <div *ngIf="i>0">
     **// do stuff here**
  </div>
  ....
....

Stallings