Angular 8: Add Div dynamically

Question

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>

              <label class="col-md-4 text-md-right col-form-label">
                <div>HOLIDAY DATE</div>
                <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>
                    </div>
                    <i class="fas fa-lg fa-fw m-r-10 m-l-5 m-t-10 text-grey fa-indent"></i>
                  </div>
                </div>
              </label>
            </div>
          </div>
          <!-- end #content -->
          <!-- end col-10 -->
        </div>

Here is screenshot below.
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';

@Component({
  selector: 'CustomerProfileAdd',
  templateUrl: './CustomerProfileAdd.html',
  styleUrls: ['./CustomerProfileAdd.css']
})

export class CustomerProfileAdd {
  active = 1;  
}

As i have several examples but only as https://stackblitz.com/edit/angular-pujraw?file=src%2Fapp%2Fapp.component.css and as like https://stackblitz.com/edit/dynamically-add-rows-gk4veg?file=app%2Fapp.component.html but for division I couldn't find it.

You have to use ngFor and and and array to do this. When you do array.push, Angular will ad another element to that list — Jones Joseph
– Jones Joseph, Commented Jun 14, 2020 at 11:28

CodeMind · Accepted Answer · 2020-06-14 17:24:46Z

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 = this.FormBuilder.group({ you can pass your row defintion : 
    yourRow[] });
    let index: number = 1;
    const row: FormGroup = this.fBuilder.group({
        reactiveFormField1: [null, Validators.required],
        reactiveFormField2: [null, Validators.required],
        .....
    });

    this.yourrow.push(row);
    index++;
}

Collectives™ on Stack Overflow

Angular 8: Add Div dynamically

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related