The task is to add an input field on the page when the user clicks on the button using AngularJs.
- 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:
- Before Clicking the Button:
- After Clicking the Button:
- How to set radio button checked by button click in AngularJS ?
- How to create button dynamically with click event in Angular ?
- How to set the input field value dynamically in AngularJS ?
- How to set checkbox checked on button click in AngularJS ?
- How to add a pressed effect on button click in CSS?
- How to dynamically get the content width of a div using AngularJS ?
- How to Load External JS Scripts Dynamically in AngularJS ?
- How to dynamically get the content height of a div using AngularJS ?
- How to set id attribute of an element dynamically using AngularJS ?
- How to select text input fields using CSS selector ?
- How to detect the duplication of values of input fields ?
- AngularJS | ng-click Directive
- What is the use of a double-click event in AngularJs?
- How to directly update a field by using ng-click in AngularJS ?
- button tag vs input type="button" attribute
- How to create dictionary and add key–value pairs dynamically?
- How to Dynamically Add/Remove Table Rows using jQuery ?
- How to call PHP function on the click of a Button ?
- How to load notification alert on top right corner without click of button in bootstrap ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.