#Keyup event angular code#

This case could be handled by using with a simple filter function () => this.opened. But if it’s already closed - then select should not care about this action and it would bubble up to close popup. In case of select, Esc should close the dropdown and move focus from menu back to select. That should happen only if this action is not handled inside some nested component. When you press Esc inside popup it should close it. To get rid of tens of change detection cycles we can add a simple filter checking if target element is already focused.Īlso in that select there is filtering of subscription. This is easy to implement, however we are not interested in mousemove events when hovered item is already focused. In case of the menu, if you take a look at virtually any implementation it behaves the following way: if you hover an option with your mouse it would get focused, next you can navigate menu with the keyboard but if you move your mouse again - focus goes back to the hovered element.

#Keyup event angular code#

Then we could write our handler this way:Īll of the described code is available on StackBlitz:Īs an example you can find a pseudo select component with a dropdown menu inside a modal popup there. Therefore attribute is not sufficient and we need to find a way to define a filtering function that would receive event and our component instance as input and return true or false.

However sometimes to figure this out we need to take a look at the event itself: see what is the original target, tell whether default action was canceled or not etc. One way to filter events could be adding an attribute to the element that would determine if we should react to this event or not. The handler function that gets there is not our original listener but a chain of closures composed by Angular for its own needs. Copy class ComponentWithEventHandler /*Īt this stage all we have is the name of the event, event itself and an element that we listen it on. A handler function typically looks like this: In my practice, however, there are often cases when handling a particular event is only required if some condition is met.

Inside directives and components we can also listen to events on host element with decorator which works the same way. The performance is much better this way than with default strategy ChangeDetectionStrategy.Default. In other words, if we listen to (input) event on an element - we are not going to have change detection ran if user simply clicks on it. Combine that with ChangeDetectionStrategy.OnPush and you get change detection cycles ran only on events we are interested in. Make sure to check them out!Īngular provides a handy declarative way to subscribe to an even inside a template using (eventName)='onEventName($event)' syntax. Keep in mind that this approach has been refined in a follow-up article and released as open source library. This remains my most popular article to date.