Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Output:

  • Before Clicking the Button:
  • After Clicking the Button:


Last Updated : 13 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads