Angular 2 Click Event

Angular 2 click event using the EventEmitter, a mother component receives the click on button event from the child component.

angular 2 click example
angular 2 click example

 

Try it yourself,Live Example

try angular 2 click event
try angular 2 click event

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component,EventEmitter,Output} from 'angular2/core';

/*Child Component Will (Send or Emit) a Click Event */
/*Angular 2 Click Event Example*/
@Component({
    selector: 'event-emitter-click-com',
    template:`
                <h2>Angular 2 Click Event Example</h2>
                <h3>EventEmitter one Click</h3>
                <div (click)="eventEmitClick($event)"> Click me once </div>

    `,
})
class EventEmitterClickComponent {
    @Output() eventEmitterClick = new EventEmitter();

    eventEmitClick(event) {
        this.eventEmitterClick.emit(event);
    }

}
/*Mother is the receiver of the event */

@Component({
    selector: 'event-emitter-click',
    template: `
                <event-emitter-click-com (eventEmitterClick)="receiveEvent($event)" >
                </event-emitter-click-com>
               `,
    directives: [EventEmitterClickComponent]

})
export class EventEmitterClickExample {
    receiveEvent(event) { console.log('Click event from angulartypescript.com'); console.log(event);  }
}

Our example uses Typescript as programming language.

Done !