How to add input fields dynamically on button click in AngularJS ?

Last Updated : 13 May, 2020

The task is to add an input field on the page when the user clicks on the button using AngularJs.

Steps:

The required component for the operation is created (add-inputComponent).
In that component, html file (add-input.component.html) required html is written.
In that HTML, the main div for input fields are there and button is created.
There is a (click) event on ADD button that redirects on the working user defined function in add-input.component.ts.
In the user defined function, the createElement() method is used to create a division every time the user clicks on the button and innerHTML() property is used to make an input field.
Then the created element div is append to the main div of add-input.component.html by appendChild() method.

Below is the implementation of above steps:
app.module.ts

// Necessary imports of component is done 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
  
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { AddInputComponent } from './add-input/add-input.component'; 
  
@NgModule({ 
  declarations: [ 
    AppComponent, 
    AddInputComponent 
  ], 
  imports: [ 
    BrowserModule, 
    AppRoutingModule, 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { } 

add-input.component.html

<!-- Main div and ADD button is created -->
<center> 
  CLICK ON BUTTON TO ADD NEW FIELD 
  <div class="showInputField"></div> 
  
  <!-- The add() function is called -->
  <button (click)="add()">ADD</button> 
</center> 

add-input.component.ts

// The class function add() is made that contains 
// the necessary code for the action 
import { Component, OnInit } from '@angular/core'; 
  
@Component({ 
  selector: 'app-add-input', 
  templateUrl: './add-input.component.html', 
  styleUrls: ['./add-input.component.css'] 
}) 
export class AddInputComponent implements OnInit { 
  
  constructor() { } 
  
  ngOnInit(): void { 
  } 
  add(){ 
    let row = document.createElement('div');   
      row.className = 'row'; 
      row.innerHTML = ` 
      <br> 
      <input type="text">`; 
      document.querySelector('.showInputField').appendChild(row); 
  } 
} 