Skip to main content
How to Bind Click event in Angular 2

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

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 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 a selector for an HTML element that represents the component.
  • The template tells Angular how to render this component’s view. There can be a URL of HTML file or you can also put HTML here. For this demo, simple HTML is put and HTML markup is having,
    • A button with attached click event, which calls to clickMe() method.
    • And a paragraph tag to show msg property.
@Component({
 selector: 'test',
 template: `<button (click)="clickMe()">Click</button>
    <br/> <p><strong>{{msg}}</strong></p>`
})

And here is complete code.

import {Component} from [email protected]/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.

Bind Click event in Angular 2

You can take a look at complete code at Plunker.

You may also like,

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

2 thoughts on “How to bind Click event in Angular 2

  1. HELLO,
    THIS IS NIDHI. I M BIGGINER TO ANGULAR2, I AM FACING ONE ERROR PLEASE GIVE ME SOLUTION OF IT.
    I HAVE MADE ONE APP FOR SIMPLE CLICK EVENT. NOW I AM GOING TO RN IT, THAN IT WILL GIVING ME ERROR,
    “12:10:55 PM – File change detected. Starting incremental compilation…
    [0] app/complexForm.ts(1,26): error TS2307: Cannot find module ‘angular2/core’.
    [0] 12:10:56 PM – Compilation complete. Watching for file changes.”
    PLEASE HELP ME.
    WAITING FOR YOUR REPLAY.

    THANK YOU,
    NIDHI.

Leave a Reply

Your email address will not be published. Required fields are marked *

four × 3 =