python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
angular 2 events example

angular 2 events example

For example, the component class and HTML template as given below.

import {Component} from 'angular2/core';

    selector: 'myApp'
    templateUrl: '<div><button (click)="myClicked()">ClickMe</button></div>'

class MyComponent {
        myClicked() {

export class myApp_Component { }

The HTML template as given below.

<button (click)="myClicked()">ClickMe</button>

In the above, the myClicked() method will be called after clicked on button and we can also capture the event object using $event as parameter. i.e.

<button (click)="myClicked($event)">ClickMe</button>

and also in component class

class MyComponent {
        myClicked(event) {


In the below live demo example, you can see the and click to toggle button


Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like Powered by Blogger.
ASK Questions