Event And Two-Way Binding In Angular 5

In this blog, we will go through event binding, two-way binding as well as template reference variable.

We know that Angular provides many ways to bind and display data. Earlier we have seen how can we bind our data using Property Binding, Class Binding, Attribute Binding and Style Binding.

If you are new to binding then please refer to my Data Binding in Angular 5 article before continuing to this article.

In this article, we will go through Event binding, two-way binding and template reference variable.

Event Binding

Firstly, let's see what an event is.  An event is an action recognized by software; i.e., an action taken by a user like a mouse clicks, key presses, etc. To bind these events, Angular provides Event binding, i.e. event binding is used to handle events raised from the DOM like keystrokes, mouse movements, clicks and so on.

Let us understand this with the help of following code,

Create a file named “event-binding.ts” inside the app folder and write the following code,

import { Component } from '@angular/core';

@Component({
      selector: 'event-binding',
      template: `<h3 align="center">
                 Event Binding Example
                 </h3><br>
                 <button class="btn btn-primary" (click)="callMyFunction()">
                    Click Me
                  </button>`,
      styleUrls: ['./app.component.css']
})
export class EventBindingComponent {
      title = 'app';
      callMyFunction() {
      console.log("My function call");
    }
}

In the above example, we have a button and we want to handle the click event of this button. So, for this, we will call a function “callMyFunction” on button click event. Due to event binding, this button calls the function which writes inside the component and shows a message on console “My function call”.

To see the output, first, you need to put this file's selector (event-binding) inside the “app.component.html” file like this,

<event-binding></event-binding>

Don’t forget to register our component in app.module.ts file.

The output of the above code,

Now, we are able to see that our click event works perfectly. But so far I have not been clear whether we can use event binding for this message only.

The answer is no, actually sometimes, we need to get access to the event object that was raised in the event handler, for example, with mouse movement the event object tells us the X and Y position. If you want to access these positions then we need to pass the event object as a parameter like this:

Write the below code in “event-binding.ts” file (it is the same as the previous one, only we pass “$event” object inside the function:

import { Component } from '@angular/core';

@Component({
      selector: 'event-binding',
      template: `<h3 align="center">
                  Event Binding Example
                  </h3><br>
                  <button class="btn btn-primary" (click)="callMyFunction($event)">
                     Click Me
                  </button>`,
      styleUrls: ['./app.component.css']
})
export class EventBindingComponent {
      title = 'app';
      callMyFunction($event) {
      console.log("Click on Event Object");
      console.log($event);
   }
}

Now, when you click on the button then you can see all the properties of the event object like this:

Here, $event object is known to Angular, this object will represents the DOM events. So, you can use any of the properties of $event object.

Let's understand more about the $event, now, I am going to implement “keyup” event on a text box and with the help of event object I will display the value of the text box.

Write the below code in “app.component.ts” file:

import { Component } from '@angular/core';

@Component({
      selector: 'event-binding',
      template: `<h3 align="center">
                  Event Binding Example
                  </h3><br>
                  <input type="text" (keyup)="callFunctionOnChange($event)" placeholder="Enter any string" class                  ="form-control w-25 mr-2 float-left">
                  <button class="btn btn-primary" (click)="callMyFunction($event)">
                        Click Me
                  </button>`,
      styleUrls: ['./app.component.css']
})
export class EventBindingComponent {
         title = 'app';
         callMyFunction($event) {
            console.log("Click on Event Object");
            console.log($event);
         }
         callFunctionOnChange($event) {
            console.log("Key Up Event Activate");
            console.log($event.target.value);
         }
  }

In the above code, I bound my text box with “keyup” event and call function “callFuncitonOnChange()”. Inside this function we display the value of textbox with the help of $event object, like this:

Similarly, you can bind a lot of events (change, click, keypress, keyup, etc).

Two-Way Binding

It is a major feature of Angular. Basically, it's what all we (developers) want. We want that whenever some changes are made into View (UI) then it automatically changes the Model also, which is a little complex to achieve with jQuery.

It can be easily achieved in Angular, this feature is called Two-Way Binding. Two-way binding means changes in the View (UI) can automatically change in the Model (Component's field) and vice-versa. The syntax of two way binding is different from other binding. Angular use parenthesis inside square brackets to achieve this functionality, like [()].

As per other bindings, like attribute binding, it requires "attr.", class binding requires "class.", and style binding requires "styles.", similarly, two-way binding requires "ngModel". Now the question is what is "ngModel"? 

Let's understand with an example. Create a file called “two-way-binding.ts” inside “app folder”, and write the following code:

import { Component } from '@angular/core';

@Component({
      selector: 'two-way-binding',
      template: `<h3 align="center">
                  Two Way Binding Example
                  </h3><br>
                  <input type="text" [(ngModel)]="userName" placeholder="Enter your name"
                   class="form-control w-25 mr-2 float-left">
                  <p>{{userName}}</p>`,
      styleUrls: ['./app.component.css']
})
export class TwoWayBindingComponent {
      title = 'app';
}

Here in the above code, we will try to implement two-way binding, i.e., whenever a change takes place in the textbox, the property of  “userName” automatically changes and is displayed inside the “<p>” tag.

We are able to achieve this with the help of ngModel, which is a built in directive that is used for implementing two-way binding. This directive is present inside the "form module". By default, form module is not imported in our application. So, you will get this error,

To get rid of this error we need to import "form module" in our app.component.ts file, like this:

import {FormsModule} from '@angular/forms';

After importing this file, put “FormModule” inside “imports”.

Now, if you want to see both event binding and two-way-binding in the browser, then put “two-way-binding” selector below the “event-binding” selector in “app.component.html” file, after that the output is,

 

In the above example, we bind textbox value to a property called “userName” and then display this propety into paragraph tag.

Template Reference Variable

Angular provides one more way to bind data. If you want to access DOM properties of your element then you can use "Template Reference Variable". You can create this variable by two ways i.e.:

By using "ref" keyword, in the below example "myVariable" is a template variable.

<input type="text" placeholder="Click on button" ref-myVariable>

By using "#" , in the below example "myVariable" is a template variable.

<input type="text" placeholder="Click on button" #myVariable>

Now, in the above two types of the declaration, "type", "placeholder" and "value" are the "DOM" properties of "input box". So, we can access all these properties with the help of Template Reference variable.

Let's understand this with the help of the example, create “template-reference.ts” file inside “app folder” and write the below code,

import {
    Component
} from '@angular/core';
@Component({
    selector: 'template-reference-variable',
    template: `<h3 align="center">Template Reference Variable's Example</h3>
<br><br>
<input type="text" placeholder="Click on button" class="form-control w-25 mr-2 float-left" ref-myVariable>
<button class="btn btn-primary" (click)="setValue(myVariable)">Click Me</button><br><br>
<div>
<b>Accessing DOM property 'Type' by template reference variable :- </b>{{myVariable.type}}<br>
<b>Accessing DOM property 'Placeholder' by template reference variable :- </b>{{myVariable.placeholder}}<br>
<b>Accessing DOM property 'Value' by template reference variable (click on button) :- </b> {{myVariable.value}}<br>
</div>`,
    styleUrls: ['./app.component.css']
})
export class TemplateReferenceComponent {
    title = 'app';
    setValue(myVariable) {
        myVariable.value = "Mahesh Verma";
    }
}

In this code, I try to use template reference on button click, i.e. whenever I clicked on a button then it will show “text”, “placeholder” as well as “value” property of DOM.

Now, if you want to see all event binding and two-way-binding and template reference in the browser, then put “template-reference-varible” selector below the “two-way-binding” selector in “app.component.html” file, after that the output is,

Note

We should not duplicate reference variable name.

Don’t forget to register all components in app.module.ts file. After registering all your components in app.module.ts file, your file looks like this, 

import { TwoWayBindingComponent } from './two-way-binding';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {FormsModule} from '@angular/forms';

import { AppComponent } from './app.component';
import { EventBindingComponent } from './event-binding';
import { TemplateReferenceComponent } from './template-reference';


@NgModule({
  declarations: [
    AppComponent,
    EventBindingComponent,
    TwoWayBindingComponent,
    TemplateReferenceComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have attached "Sample2WayBinding", a sample project along with this article. This project contains the example of event binding, two-way binding as well as template reference variable, but before running this project install node_modules in this project by using the below command,

npm install

Conclusion

As we know, Angular supports multiple types of binding such as property, event, class, style, two-way as well as event binding, and after having read this article, we can say that we have the knowledge of all kinds of binding supported by Angular.

I hope it is helpful to you. If you face any problem drop a comment or message to me.