Angular For loop iterations

Question

I have a number (number of slots) in my application.

by using this number value i need to iterate a div in html inside div i am going to display button.

**in simple words:**if numberOfSlots is 12 i need to create 12 button in html

but in angular *ngFor will only allow array to iterate.

 <form [formGroup]="staffAddForm" name='staffAddForm' novalidate *ngIf="staffAddForm">
    <div class="col-md-9" formArrayName="staffs">
        <div *ngFor="let data of staffAddForm.controls['staffs'].controls; let i = index" [formGroupName]="i">
            <div class="col-md-12">
                <app-synap-ch [chId]="'user' + '_' + i" 
                [formName]="data.controls['staff']"
                (notifyClickCheckBox)="changeNewStaff($event, i, data)">
            </app-synap-ch>
            <div *ngFor="let item of appointmentsData.numberofSlots; let j = index">
                <button (click) = "getValue()">j+1</button>
            </div>
        </div>
    </div>
</form>

Possible duplicate of [Angular 2 - NgFor using numbers instead collections](https://stackoverflow.com/questions/36354325/angular-2-ngfor-using-numbers-instead-collections) — bugs, May 23 '18 at 10:26

score 0 · Answer 1 · answered May 23 '18 at 11:30

0

This might be duplicate of

Repeat HTML element multiple times using ngFor based on a number

Please refer the above question, this is similar to yours.

answered May 23 '18 at 11:30

Sagar

1
2

score 0 · Accepted Answer · answered May 23 '18 at 11:30

It's annoying that there isn't an easier way to do this that doesn't feel like a workaround.

The simplest solution I can think of is creating a new array from the number but there are quite a lot of different ways to this

*.component.html

<div 
    *ngFor='let item of counter(appointmentsData.numberofSlots); let i = index'>
      {{ i }}
</div>

*.component.ts

counter(i: number) {
    return new Array(i);
}

Angular For loop iterations

2 Answers2