Solution 1 :

Use Reactive form. it has powerful features for all kind of form operations.First get an idea about reactive forms from here. use FormBuilder for build the dynamic array and call this method on your button click

addRowsToTable(): void {
    this.sampleTableForm ={ you can pass your row defintion : 
    yourRow[] });
    let index: number = 1;
    const row: FormGroup ={
        reactiveFormField1: [null, Validators.required],
        reactiveFormField2: [null, Validators.required],


Problem :

Here is my HTML code below.

<div class="row" style="padding-bottom: 5%;">

          <div class="col-md-12" id="HolidayDiv">
            <div class="form-group row justify-content-md-center m-b-10">
              <label class="col-md-4 text-md-right col-form-label">
                <div>HOLIDAY NAME</div>
                <div><input type="text" name="firstname" placeholder="" class="form-control"></div>

              <label class="col-md-4 text-md-right col-form-label">
                <div>HOLIDAY DATE</div>
                  <div class="input-group date" data-provide="datepicker">
                    <input type="text" class="form-control">
                    <div class="input-group-addon">
                      <span class="far fa-calendar-alt"></span>
                    <i class="fas fa-lg fa-fw m-r-10 m-l-5 m-t-10 text-grey fa-indent"></i>
          <!-- end #content -->
          <!-- end col-10 -->

Here is screenshot below.
div desc
Here the small red box is an add button and the large red box div is what i need to add below dynamically.

Here is my typescript file below.

import { Component, Input, OnInit } from '@angular/core';

  selector: 'CustomerProfileAdd',
  templateUrl: './CustomerProfileAdd.html',
  styleUrls: ['./CustomerProfileAdd.css']

export class CustomerProfileAdd {
  active = 1;  

As i have several examples but only as and as like but for division I couldn’t find it.


Comment posted by Jones Joseph

You have to use