1

I am trying to build an angular2 application with multiple components. It is built using custom and many third party UI components. One of the tree component I use, registers a global keyDown listener on the document using @Hostlistener. One of my component has a table with multiple selection. So a simple select action using 'ctrl' key fires the handler of the tree component.

My sample usecase

  1. I have a MyTreeComponent which has a tree. The tree needs to handle the 'delete' key and delete the node
  2. There are 4-5 instances of MyTreeComponent (imagine an accordion with multiple trees inside)

I register a listener on keydown in my component which has the tree like below :

import {HostListener, KeyboardEvent} from '@angular/core';

@Component({...})
export class MyTreeComponent  {

  @HostListener('document:keydown', ['$event'])
  onKeyDown(event:KeyboardEvent) {
  // check if the event is a delete and perform delete action
  }
}
  1. I have another component with a table which has a row multi select functionality.

So if I multiselect using the ctrl' key in my tablecomponent the 'onKeyUp()' of all the 4-5 MyTreeComponent instancea gets fired and too many times.

This is slowing down the performance quite significantly. Any thoughts how this could be improved ?

Also a couple of questions

  1. Is there a way to register a component specific Hostlistener ?
  2. Is there a way to know which component is currently active (or in focus) at any point in time ? So that i could add and remove @Hostlistner dynamically (if it is possible)

Thanks in advance for help

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Murthy
  • 13
  • 5
  • 1
    Please add the code to your question that demonstrates what you try to accomplish. Prose is nice but quite vague. `@HostListener()` is component specific by default. What do you consider "active"? You can set `tabindex="0"` and listen to the `focus` event and track yourself which component has got the focus last or use `activeElement` https://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus – Günter Zöchbauer May 24 '17 at 10:01
  • 2. You can get just like javascript `document.activeEmenent`. It will show whichever element is currently active. And yes as mentioned by Gunter `tabIndex=0` should be there – The Hungry Dictator May 24 '17 at 10:03
  • thanks @GünterZöchbauer and TheDictator for your inputs. I have updated my question with some more details. Any suggestions ? – Murthy May 24 '17 at 11:51
  • What is a component-specific `@HostListener()`? You can't add/remove `@HostListener()` dynamically. You can decide to ignore events inside the handler depending on a flag though. `if(!ignore) { doSomething}` – Günter Zöchbauer May 24 '17 at 11:53
  • 1
    By component specific listener I mean a keyboard listener whichs triggered if the key event occurred within that component and not outside. And even if I use a flag, I experienced considerable time spent to make the comparison in multiple instances on too many 'ctrl' key events. – Murthy May 24 '17 at 12:02
  • going with a workaround for now. attaching the listener on focus gained and removing the listener (assigning an empty function) on focus lost. – Murthy Jun 21 '17 at 05:43

0 Answers0