How to add input fields dynamically on button click in AngularJS ?
Last Updated :
13 May, 2020
Improve
The task is to add an input field on the page when the user clicks on the button using AngularJs.
Steps:
javascript
add-input.component.html
html
add-input.component.ts
javascript
Output:
- 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.
// 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 { }
<!-- 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>
// 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);
}
}
- Before Clicking the Button:
- After Clicking the Button: