How to implement multiple dynamic form array with template driven approach in angular2+ ?

[ACHARYA ANIL KUMAR]

I have implemented in reactive form approach. as follow 

https://raw.githubusercontent.com/acharyaks90/dynamicRowAddtionNG5/master/src/app/app.component.html

component .html 

<h1>
  {{title}}
</h1>
<form [formGroup]="multiForm">


<table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
      <th> Action</th>
    </tr>
  </thead>
  <tbody formArrayName="userDetails">
    <tr   *ngFor="let single of multiForm.controls.userDetails.controls; let $index=index;" [formGroupName]="$index">
      <th scope="row">{{$index}}</th>
      <td><input type="text" class="form-control" formControlName="firstName"></td>
      <td><input type="text" class="form-control" formControlName="lastName"></td>
      <td><input type="text" class="form-control" formControlName="userName"></td>
      <td><button *ngIf="$index==(multiForm.controls.userDetails.controls.length-1)" (click)="onAdd();">Add +</button> <button (click)="onDelete($index);">Delete -</button></td>
    </tr>
   
  </tbody>
</table>

</form>

<button class="btn btn-primary" type="button" (click)="sendData()">Send/ Show</button>
<br>
<hr>
JSON Data
<br>
{{personList|json}}

component.ts 

https://raw.githubusercontent.com/acharyaks90/dynamicRowAddtionNG5/master/src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';

  multiForm: FormGroup;

  
  personList = [
    {
      'fName': "Mark",
      'lName': "Otto",
      'UserName': "@mdo"
    }, {
      'fName': "Mark",
      'lName': "Otto",
      'UserName': "@TwBootstrap"
    }, {
      'fName': "Jacob",
      'lName': "Thornton",
      'UserName': "@fat"
    }
  ]

  constructor(private formBuilder: FormBuilder) {
   
    this.multiForm = this.formBuilder.group({
      userDetails: this.formBuilder.array([])
    });
  }

  ngOnInit() {
    
    this.multiForm = this.formBuilder.group({
      userDetails: this.formBuilder.array(
        this.personList.map(x => this.formBuilder.group({
          firstName: [x.fName, [Validators.required, Validators.minLength(2)]],
          lastName: [x.lName, [Validators.required, Validators.minLength(2)]],
          userName: [x.UserName, [Validators.required, Validators.minLength(2)]]
        }))
      )
    })
  }



  onAdd(){
    console.log('11');
    // this.personList.push({
    //   fName: "Anil",
    //   lName: "kk",
    //   UserName: "@anks"
    // })

    const steps = <FormArray>this.multiForm.controls['userDetails'];
    steps.push(this.formBuilder.group({
      firstName: ['muuu', [Validators.required, Validators.minLength(2)]],
      lastName: ['aa', [Validators.required, Validators.minLength(2)]],
      userName: ['test', [Validators.required, Validators.minLength(2)]]
    }))
  }
  onDelete(index){
    console.log(this.multiForm);
    const steps = <FormArray>this.multiForm.controls['userDetails'];
    
    steps.removeAt(index);
  }

  sendData(){
    console.log(this.multiForm.value);
    this.personList = this.multiForm.value.userDetails;
  }
}

So now something similar.