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

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.

Bind Click event in Angular 2

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,

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 Buy Me A Coffee

8 thoughts to “How to bind Click event in Angular 2”

  1. Hi..
    i have a doubt in angular 6 . button click event i called one function in html page. that function defined in ts file. i didn’t called inside ngoninit function. so first time clicked that button the function called but values not returning. again am clicking the button then the data returns(binding). otherwise i have given in ngoninit function its working fine.

    i need solution for the above..

    also one more doubt.. i have 20 function in that ts file. then i should be call nginit function.. which means what about performance. i want to know the exact answer pls.

  2. Hi,
    I have one question, I want to use this code in my website but in this when we reloads page the count of clicks gets restart from 0 how to set that increasing means if last person clicked 8 times then next person who comes to that page should get count of 8 and when he clicks it should goes on like 9 10 11 like that.
    So for this kind of situation what changes should be done in coding please can you help me?

    Thank you.

  3. 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 *