CODEWITHSUNDEEP
htmlangulartypescriptangular8
user13381500
user13381500

Reputation:

Angular 8: Add Div dynamically

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.
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';

@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.

Upvotes: 0

Views: 2120

Answers (1)

CodeMind
CodeMind

Reputation: 646

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++;
}

Upvotes: 0

Related Questions