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 create button dynamically with click event in Angular ?
- How to dynamically get the content width of a div using AngularJS ?
- How to Load External JS Scripts Dynamically in AngularJS ?
- 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 ?
- How to add a pressed effect on button click in CSS?
- How to click a button on webpage using selenium ?
- How to call PHP function on the click of a Button ?
- How to create a Ripple Effect on Click the Button ?
- How to select text input fields using CSS selector ?
- How to detect the duplication of values of input fields ?
- How to load notification alert on top right corner without click of button in bootstrap ?
- button tag vs input type="button" attribute
- How to make sure clients have enough words in textarea by using angularjs in order to disable/enable a button?
- AngularJS | input Directive
- How to Reset an Input Value when Limit Exceeds using AngularJS ?
- HTML | DOM Input Button value Property
- How to change an input button image using CSS?
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.