|

How To Bind Events In AngularJS

How To Bind Events In AngularJS

We want the user to be able to take an action, and cause something to happen on the page. Users will enter text into input boxes, pick items from lists and click buttons. These types of user actions result in a flow of data from an element to a component. Listening for certain events such as keystrokes, mouse movements, and clicks are done with Angular event binding. The most common action a user may take is a click event. Some of the common JavaScript events include onclick, onmouseover, onmouseout, onchange, onkeydown, onkeyup, and many more. We can set up a click event in Angular using a special syntax.


(click)=”methodToRun()”

In the virtual-machines.component.html Angular Template, if you would like to respond to a click event you can use this form of binding.

The (click) says, “hey, we’re listening for the user to click”. The =”onCreateVM()” portion of the markup says, “run this piece of code when clicked”.


Configure The .ts file to respond

In our template, we now have a click event listener set up. When it is click, we want something to happen. To set this up, first we will create a new variable to hold an initial state of data. This will be the vmCreated variable we see here in virtual-machines.component.ts.

In addition to the new variable, we also need the new method or function that is supposed to run when the button is clicked. We had named that function onCreateVM in the template. That means we will add that named function to the TypeScript file like so:


Reference The Data in The Template

Finally, we output the contents of the vmCreated variable via string interpolation. On page load, it should output the initial value of the variable. When the user clicks the button, that value should change which will also update the user interface in real-time.

Checking the result in the browser gives us that expected result. Initially, the page loads showing the string that is stored in the vmCreated variable. Then, we click the button, and our function onCreateVM runs. This changes the data stored in the vmCreated variable, and the page updates to reflect that in real-time. There are many ways to react to user input in Angular, this was just an example of reacting to a button click.


(input)=”onMethodToRun($event)”

Speaking of user input, let’s set up an <input> field that will allow the user to provide a name for the VM before creating it. That $event is special. It is like a reserved variable name you can use in the template during event binding. It is a way to fetch the data from that input when it fires. So this is how we will set up the virtual-machines.component.html template for this test.

Now we can accept that data in the onSetVmName method in virtual-machines.component.ts.

With this, we can see that we are indeed capturing the data that is being typed into the input field.


Two Way Data Binding

In the code above, we kind of took the long route to set up data binding. An easier approach is to simply use the [(ngModel)] directive.

You’ll note that we also set the name attribute using name=”vmName”. The reason for this is because if you leave it out, you may see an error like “ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the formcontrol must be defined as ‘standalone’ in ngModelOptions.”

Testing out the data binding using [(ngModel)]=”vmName” does appear to be working well. Also note that we no longer need the onSetVmName(event) method in virtual-machines.component.ts since ngModel is handling that for us automatically.


Putting It All Together

At this stage, we want to be able to type in the input, but not have it display on the screen right away. We’ll capture that data, but only output it to the screen once the user clicks the button. To do this, we can update the onCreateVM() method to make use of the captured data like so.

This gives us the final result which looks something like this.

|