Как создать динамические формы без реактивных форм в angular6?

Question

У меня есть объект класса с полями: Template = {id?: Text, widgets?: Any []}

всякий раз, когда я нажимаю кнопку добавления, поля ввода обновляются на html-странице TypeScript и HTML:

template : Template= new Template();
ngOnInIt() {
   this.template.widgets = [];
}
addWidget(W_id :String){
    this.template.widgets.push({
      index : null,
      title: null
    });
}

  <mat-form-field>
<mat-select id="selectWidget" placeholder="Add Widget"[(value)]="w_id" >
<mat-option value='image'>Image</mat-option>
<mat-option value='title'>Title</mat-option>
</mat-select>
</mat-form-field>

<button mat-raised-button color="primary" type="button" class="float-right" (click)="addWidget(w_id)"><i class="material-icons">add</i>Add</button>
              
<div *ngFor="let widget of template.widgets; let i = index">
  <mat-form-field class="example-full-width template-style">
  <input matInput type="text" placeholder="Index" [(ngModel)]="widget.index" name="index" >
  <input matInput type="text" placeholder="Page Title" [(ngModel)]="widget.title" name="title" >  
  </mat-form-field>
</div>