Angular 2 Double Click

Angular 2 Double Click (dblclick) event using the EventEmitter, a mother component receives the double click (dblclick) event from the child component when a user clicks twice on an element.

angular 2 double click example
angular 2 double click example

live example and resources at the end of the article

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

/*Child Component Will (Send or Emit) a DoubleClick Event */
@Component({
    selector: 'event-emitter-double-click-dblclick-com',
    template:`
                <h2>EventEmitter on DoubleClick</h2>
                <input type="text" value="Do DoubleClick Action To See" (dblclick)="eventEmitDoubleClick($event)" class="event-emitter-double-click-dblclick-component-style"/>

    `,
    styles:[`
            .event-emitter-double-click-dblclick-component-style {
              width: 200px;
              background-color:#00AA00;
              color: white;
             }

         `]
})
class EventEmitterDoubleClickComponent {
    @Output() eventEmitterDoubleClick = new EventEmitter();

    eventEmitDoubleClick(event) {
        this.eventEmitterDoubleClick.emit(event);
    }

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

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

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

Our example uses Typescript as programming language.

angular 2 doubleclick