How to assign a starting index value while using ngFor in angular

Question

I have a requirement to always display minimum of 5 rows(5 or more rows) in a table. For example, if there are 2 rows available in Database, I need to display other 3 more rows in UI with empty rows.

Here is what I tried so far:

<div *ngFor="let task of tasks; let i = index">
    <div class="rowDiv">{{task.id}}</div>
</div>

Here I want to run the loop from i = tasks.size to i < = 5. So that I have total of 5 rows in UI. How to achieve this?

<div *ngFor=" let i = index">
    <div class="rowDiv"></div>
</div>

Like Alex mentions, the easiest way is to make sure the taks array exist of 5 element. Like this: let tasks= ['task 1', 'task 2', 'task 3']; tasks = tasks.length < 5 ? [...new Array(5)].map((_, i) => tasks.length >= i ? tasks[i] : null) : tasks; — Marcel Hoekstra
– Marcel Hoekstra, Commented May 25, 2020 at 16:36
Are you fetching the data from the API? If so, do you have control over the API? If so, you can easily do this in API. If not, this can be done in the typescript. — Manish
– Manish, Commented May 25, 2020 at 16:39
What do you mean API? I am fetching the values from the backend REST service that is exposed. — code_buddy
– code_buddy, Commented May 25, 2020 at 16:40

Martin Parenteau · Accepted Answer · 2020-05-25 19:02:47Z

4

You can loop over an array of 5 items, and use *ngIf to display an additional row if no data item exists at a given index:

<div *ngFor="let task of tasks">
  <div class="rowDiv">{{task.id}}</div>
</div>
<ng-container *ngFor="let i of [0,1,2,3,4]">
  <div *ngIf="!tasks[i]">
    <div class="rowDiv">This row is empty</div>
  </div>
</ng-container>

See this stackblitz for a demo.

edited May 25, 2020 at 19:02

answered May 25, 2020 at 16:40

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

1 Comment

code_buddy Over a year ago

This is closer to what I wanted. However, in this way I get maximum 5 elements in the UI. My requirement is minimum 5 elements should be displayed in UI at any point. However, this list can grow from backend and the items will be scrolled in the table.

Eliseo · Accepted Answer · 2020-05-25 17:25:50Z

2

you can also add so many rows you need after

  <table>
    <row *ngFor="let task in task">
    </row>
    <!--if task.length<5-->
    <ng-container *ngIf="tasks.length<5">
    <!-use slice:0:5-tasks.length-->
    <row *ngFor="let i of [0,1,2,3,4] |slice:0:5-tasks.length">
    </row>
    </ng-container>
  </table>

answered May 25, 2020 at 17:25

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Comments

Nicholas K · Accepted Answer · 2020-05-25 17:12:53Z

1

You don't need to keep this logic in html. In you class you can do something like this: (suppose you fetch tasks from server)

this.getTasks().subscribe((tasks) => {
   const emptyTasks = Array(5).fill({id: 'empty'});
   this.tasks = tasks.map((t, index) => t || emptyTasks[index]);
})

edited May 25, 2020 at 17:12

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

answered May 25, 2020 at 16:31

Alex Voloshyn

1861 silver badge6 bronze badges

1 Comment

Marcel Hoekstra Over a year ago

this.tasks = tasks.length < 5 ? [...new Array(5)].map((_, i) => tasks.length >= i ? tasks[i] : {id: 'empty'}) : tasks;

Barremian · Accepted Answer · 2020-05-25 17:09:21Z

0

This could be better handled in the controller. In case of default change detection strategy, the template is reloaded multiple times without our control or knowledge. So it's better to make sure the tasks variable has atleast 5 elements in the controller rather than to control the flow in the template. You could something like the following in the controller and leave the template unchanged.

for (let i = 0; i < 5; i++) {
  if(!this.tasks[i].id) {
    this.tasks[i].id = '';
  }
}

answered May 25, 2020 at 17:09

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to assign a starting index value while using ngFor in angular

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related