niaomingjian niaomingjian - 1 year ago 159
jQuery Question

How to navigate/focus to the next item in Angular2?

I want to focus to the next item using Arrow keys.

In keydown event handler, I use event.currentTarget.nextSibling to access the next item.

Is there another way to accomplish this?

In the event handler, I want to use JQuery to do this. How to do this?

<li *ngFor = "let work of works" tabindex="-1" (keydown.ArrowDown)="handleKeyEvent( $event, 'Arrow Down' )">
<div class="guide-label">

export class WorkComponent {
handleKeyEvent(event: Event): void {


Answer Source

Create a focus directive (and register it in your NgModule) that calls focus() on the host element when the input value changes to true:

  selector : '[myFocus]'
class MyFocus {
  constructor(public renderer: Renderer, public elementRef: ElementRef) {}

  set myFocus(value :boolean) {
    if(value) {
          this.elementRef.nativeElement, 'focus', []);

Add the selector and a binding that passes true or false to the directive when it is supposed to be focused:

<li *ngFor = "let work of works let idx=index" tabindex="-1" 
    [myFocus]="idx == focusedIdx" (keydown.ArrowDown)="handleKeyEvent( $event, 'Arrow Down' )">

Update focusedIdx on key events:

       handleKeyEvent(event: Event): void {

See also Angular 2: Focus on newly added input element

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download