How to create a button dynamically with click event in Angular?

Pranay Chauhan
Last Updated: May 13, 2022

Introduction

Angular is one of the most popular front-end web frameworks. Angular is a component-based framework used for building scalable web applications. 

In this article, we will learn about the importance of Event binding in angular, and how we can create a button dynamically in Angular by using click event functionality.

Let us dive into the concept of Event binding in Angular.

Event binding in Angular

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

In an event binding, Angular configures an event handler for the target event. You can use event binding with your own custom events.

When the component or directive raises the event, the handler executes the template statement. The template statement performs an action in response to the event.

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 way 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>


JS

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;
           };
   }]);


Output

As we will keep clicking the button, the number of buttons keep on increasing in the DOM:

After clicking a button

On clicking the button again

Frequently Asked Questions (FAQs)

  1. 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.
     
  2. 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.

Key Takeaways

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.

For more information about the web development frameworks for frontend development, get into the entire Frontend web development course.

Happy Learning!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think