How to create a button dynamically?
Our task is to create a button dynamically with the click event using angular. In these examples when someone clicks on the button then a new button is created.
One of the easiest ways to create a button in AngularJS is to use the ng-repeat directive. We can very easily hook up a repeat logic inside the button.
Syntax
<element ng-repeat="variable in expression"> Contents... </element>
Consider an example where we will have a counter variable which keeps the count of the buttons currently present in the DOM. It will get increased by one each time the “Add a button” is clicked. The increase in the count will result in a new button which is generated by the ng-repeat.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
<script src="index.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1>
Coding Ninjas
</h1>
<button type="button"
ng-click="click(this)">
Add a button
</button>
<br>
<!-- Dynamically created button using repeat -->
<button type="button"
ng-repeat="i in range(0, counter)">
New button!
</button>
</center>
</body>
</html>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.click = function($scope) {
$scope.counter++;
}
$scope.range =
function(min, max, step) {
step = step || 1;
var input = [];
for (var i = min; i < max; i += step) {
input.push(i);
}
return input;
};
}]);
You can also try this code with Online Javascript Compiler
Output
As we will keep clicking the button, the number of buttons keeps on increasing in the DOM:
After clicking a button
On clicking the button again
Frequently Asked Questions
What is an event binding in Angular?
Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
Which directive do we use in Angular to create a button?
The easiest way to create a button in AngularJS is to use the ng-repeat directive.
Conclusion
In this article, we learned about the concept of event binding in Angular. This is an interesting concept of event binding that allows us to dynamically change components in Angular. We also learned about the implementation of adding a button dynamically with click events in Angular.
Apart from this, you can also expand your knowledge by referring to these articles on Javascript and Web development.
Recommended Readings:
Introduction to HTML
For more information about the web development frameworks for frontend development, get into the entire Frontend web development course. You can also check out the Full-Stack Web Development Course to be more thorough.
Also check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, etc. as well as some Contests and Interview Experiences curated by top Industry Experts only on Coding Ninjas Studio.
Happy Learning!
7+ registered 
