How to bind Click event in Angular 2

In this short post, find out how to bind click event in Angular 2. ngClick is used in Angular 1.x to bind the click event but things changed in Angular 2. One of the major change in Angular 2 is, that it directly uses the valid HTML DOM element properties and events. So take the HTML event and wrap it with parentheses. So with Angular 2, use (click) to attach a click event in Angular 2. Read difference between Angular 1.x and Angular 2 to know more about other differences.

How to bind Click event in Angular 2

​

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

Let’s create an application to demonstrate how to bind click event in Angular 2. This sample application will just increase a counter on every click and display the same the on-screen.

Let’s first declare a class which will have clickMe() method and a property named msg. Along with these 2, it is also having nCnt variable, which keeps track of the number of clicks. Here, nCnt variable data type is number. This is how you define variables in TypeScript.

export class TestComponent {
  msg = "";
  nCnt: number = 0;
  clickMe() {
      this.nCnt = this.nCnt + 1;
      this.msg = "Clicked: " + this.nCnt;
  }
}

So within the method, increase the counter by 1 and set the new value in msg property.

And now add some metadata to our class using @Component annotation. The @Component metadata object has two fields, a selector, and a template.

• The selector specifies an HTML element that represents the component.
• The template tells Angular how to render this component’s view. It can have a URL of HTML file or you can also put HTML tags. For this demo, simple HTML is put. The HTML markup is having,
  • A button having a click event, which calls to clickMe() method.
  • A paragraph tag to show msg property.

@Component({
 selector: 'test',
 template: `<button (click)="clickMe()">Click</button>
    <br/> <p><strong>{{msg}}</strong></p>`
})

Below is the complete code.

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

@Component({
 selector: 'test',
 template: `<button (click)="clickMe()">Click</button>
    <br/> <p><strong>{{msg}}</strong></p>`
})
export class TestComponent {
  msg = "";
  nCnt: number = 0;
  clickMe() {
      this.nCnt = this.nCnt + 1;
      this.msg = "Clicked: " + this.nCnt;
  }
}

And here is the output of the application.

You can take a look at complete code at Plunker.

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here.

You may also like,

• Bind RadioButton List in Angular 2
• Bind Select DropDown List in Angular 2
• Cascading DropDown List using Angular 2
• Don’t use hidden attribute with Angular 2

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

PS: If you found this content valuable and want to return the favour, then