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: