In this Angular application, my requirement is to repeat the elements inside a div based on the number entered in an input box (record.accountRoles).
<!-- Input Box -->
<div class="form-group">
<label for="name">Enter the number of accounts</label>
<input type="text" class="form-control" [(ngModel)]="record.accountRoles" name="accountsRoles" required>
</div>
<!-- Div Elements to Repeat -->
<div *ngFor="let i of record.accountRoles.length">
<label for="name">Account ID</label>
<input type="text" class="form-control" [(ngModel)]="record.roles[i].accountid" name="accountid" required>
<mat-checkbox [(ngModel)] = "record.roles[i].role">
<label>IT Admin</label>
</mat-checkbox>
</div>
This is how the record variable is initialized:
record = {firstName:null,lastName:null,emailAddress:null,accountRoles:null,roles:[{accountid:null,role:null}]};