Directive with click listener and click event on the same element in Angular2

Question

<a appMenuDropDown (click)="getSubMenuItems(menuItem)">
.......
</a>

What happens when an element has a directive (appMenuDropDown) listening for a click event and a click event handler (getSubMenuItems()) ? Which handler gets triggered first ? Handler in directive or getSubMenuItems() ?

@HostListener('click')
clickListener() {
    let sourceElement = this.el.nativeElement;
    ....
}

I think element's event will be fired first. You can simply console.log both and see... — Dimanoid
– Dimanoid, Commented Dec 7, 2016 at 11:20

yurzui · Accepted Answer · 2016-12-07 11:41:33Z

1

I think that in your case HostListener within directive will be always fired first

You can take a look at generateHandleEventMethod method within compiler from source code

directives.forEach((dirAst, dirIdx) => {
  ...
});
boundEvents.forEach((renderEvent, renderEventIdx) => {
  ...
});

https://github.com/angular/angular/blob/2.2.4/modules/%40angular/compiler/src/view_compiler/event_binder.ts#L92-L115

and here is generated component.ngfactory

View_AppComponent0.prototype.handleEvent_4 = function(eventName,$event) {
  var self = this;
  self.debug(4,2,4);
  self.markPathToRootAsCheckOnce();
  var result = true;
  result = (self._AppMenuDropDownDirective_4_3.handleEvent(eventName,$event) && result);
  if ((eventName == 'click')) {
    var pd_sub_0 = (self.context.getSubMenuItems() !== false);
    result = (pd_sub_0 && result);
  }
  return result;
};

Demo

answered Dec 7, 2016 at 11:41

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raja Vengala Over a year ago

It is indeed directive handler first in all my testing. I was not sure if it is programmed to be in that specific order. Thank you for the demo and the compiled code.

Günter Zöchbauer · Accepted Answer · 2016-12-07 11:22:06Z

1

The order of event handlers is explicitly undefined. Also if you have several directives on an element, the order they are added is not significant to the order event handlers are processed.

answered Dec 7, 2016 at 11:22

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

Directive with click listener and click event on the same element in Angular2

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related