How to copy part of a template?

Question

JavaScript

Good day, there is a form, it looks like this.

By pressing the + button, you need to add the same fragment as in the screenshot, but in the end the data would be different. When you click on the button - delete the last one.

<div class="sub" #sub>
          <div class="row">
            <div class="col-6 m-1">
              <mat-label>ФИО абонента</mat-label>
              <input type="text" tabIndex="7" class="form-control" [(ngModel)]="fio_sub"/>
            </div>
            <div class="col-5 m-1">
              <mat-label>Статус</mat-label>
              <ng-select
                tabIndex="8"
                [items]="status_sub"
                bindLabel="name"
                bindValue="id"
                dropdownPosition = "top"
                notFoundText="Не найдено"
                loadingText="Загрузка..."
                [selectOnTab]="true"
                [loading]="loadingStatus"
                [(ngModel)]="selectedStatus"
              >
              </ng-select>
            </div>
          </div>
          <div class="row">
            <div class="col-6 m-1">
              <mat-label>Дата начала </mat-label>
              <input type="date" tabIndex="9" class="form-control" [(ngModel)]="dateBegin"  max="9999-12-12" />
            </div>
            <div class="col-5 m-1">
              <mat-label>Дата окончания </mat-label>
              <input type="date" tabIndex="10" class="form-control" [(ngModel)]="dateEnd"  max="9999-12-12" />
            </div>
          </div>
        </div>

Answer 1

Create an interface

interface User {
 fio_sub: string;
 selectedStatus: number;
 dateBegin: Date;
 dateEnd: Date;
}

you declare an array of these interfaces in the component
users: User[] = [];
and wrap the entire form in *ngFor.

<div *ngFor="let user of users" class="sub" #sub>
 <input [(ngModel)]="user.fio_sub"/>
</div>

Well, accordingly, you add an empty interface to the + button.