La tarea es agregar un campo de entrada en la página cuando el usuario hace clic en el botón usando AngularJs.
Pasos:
- Se crea el componente necesario para la operación (add-inputComponent) .
- En ese componente, se escribe el archivo html (add-input.component.html) html requerido.
- En ese HTML, el div principal para los campos de entrada está allí y se crea el botón .
- Hay un evento (clic) en el botón AGREGAR que redirige a la función definida por el usuario en funcionamiento en add-input.component.ts .
- En la función definida por el usuario, el método createElement() se usa para crear una división cada vez que el usuario hace clic en el botón y la propiedad innerHTML() se usa para crear un campo de entrada.
- Luego, el div del elemento creado se agrega al div principal de add-input.component.html mediante el método appendChild() .
A continuación se muestra la implementación de los pasos anteriores:
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 { }
agregar-entrada.componente.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);
}
}
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
