AngularDart NgComponent using event listeners in the controller

Question

I have an NgComponent in Angular Dart which instantiates a search box and according to the query strings it populates another div in my html template with the ng-repeat directive.

More precisely,

Query string update: there is a binding to the input text value with a field in my components' controller.

Results population: In the attach() method I added a watcher for the local field which acts as a model to the input box, and whenever it changes I add to a local list some items which then acts as a model to the ng-repeat directive in another div.

So far everything works fine. But now I want to add some event listeners inside my component, like keystroke listeners or if possible to add listeners on specific elements in my html template. I have used CSS for hover and focus events and also ng-focus and ng-blur for easy functions. But I do not think that this can be used for keystroke listeners.

The reason I want the keystroke listener is to enable results traversing using the arrow keys. While the cursor is inside the input text box I would like to move to the first result, which is in another div, with the press of Down arrow, and then continue to the other results.

Thank you

Answer 1

OK, It seems that I have finally found the solution.

The solution is to implement the NgShadowRootAware interface with my component and then inside the void onShadowRoot(ShadowRoot shadowRoot) method I have full access to the DOM created inside the shadow dom template.