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.

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>

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]);
})

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 = '';
  }
}

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>