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
add-input.component.html
add-input.component.ts
Output:
- Before Clicking the Button:
👁 Image
- After Clicking the Button:
👁 Image
