I am having a bootstrap's dropdown menu (I implemented only styles without Javascript)... hence I need to port to angular2 some js functionality.

One is keyboard accessibility.

So far I have:

<div (keydown)="onMenuKeydown($event)" ....>
    <ul class="dropdown-menu">
        <li><a href="#"...>option 1</a></li>
        <li><a href="#"...>option 2</a></li>
        <li><a href="#"...>option 3</a></li>
    </ul>
</div>

In my controller I have this:

onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}

What I would like is that on arrow down it simulates or triggers the TAB key (so it should focus next element) and on arrow key up to simulate the SHIFT-TAB key (previous tabindex)

I have the event.srcElement and have nextSiblingproperty but it doesn't have the method focus... so cannot do event.srcElement.nextSibling.focus();.

What would be the best solution here?

I am having a bootstrap's dropdown menu (I implemented only styles without Javascript)... hence I need to port to angular2 some js functionality.

One is keyboard accessibility.

So far I have:

<div (keydown)="onMenuKeydown($event)" ....>
    <ul class="dropdown-menu">
        <li><a href="#"...>option 1</a></li>
        <li><a href="#"...>option 2</a></li>
        <li><a href="#"...>option 3</a></li>
    </ul>
</div>

In my controller I have this:

onMenuKeydown(event: KeyboardEvent){
    if(event.keyCode === 40){
        /*event.srcElement.nextSibling.*/
        event.preventDefault();
    }
}

What I would like is that on arrow down it simulates or triggers the TAB key (so it should focus next element) and on arrow key up to simulate the SHIFT-TAB key (previous tabindex)

I have the event.srcElement and have nextSiblingproperty but it doesn't have the method focus... so cannot do event.srcElement.nextSibling.focus();.

What would be the best solution here?

• javascript
• angular
• dom-events

• how do you switch between tabs? adding/removing a css class? – Supamiu Commented Sep 15, 2016 at 12:01
• not a tab... its a drop down menu... and you can check here: getbootstrap./javascript/#dropdowns ... click on one to open and then navigate with the tab key – Demiro-FE-Architect Commented Sep 15, 2016 at 22:00
• I think that the best way would be to add bootstrap's javascript too in your index.html file. This way you don't have to worry about how to make it work in angular2, since bootstrap will already make it work. – Supamiu Commented Sep 16, 2016 at 7:52
• yeah... sure.. why didn't I thought of that before.... the whole point is to stay clear of jquery and cumbersome js... angular does things just find, just need to figure the way... hope this is not your solution for everything... just include more/everything ... – Demiro-FE-Architect Commented Sep 16, 2016 at 8:28
• 1 So I think the best way to do it would be to use an angular2 dropdown and add bootstrap style on it. you can even get a bootstrap dropdown made with angular2 on npm: npmjs./package/ng2-dropdown You can even see the source code on github if you want to copy the behaviour on your ponent. – Supamiu Commented Sep 16, 2016 at 9:06

1 Answer 1

so, for the reference, there is obviously a distinction between Element and HTMLElement, the later is extended one.

Angular2 has a ElementRef you usually use when referencing an HTML element...

so to get a HTMLElement from event.nextSibling you do

let next = new ElementRef(event.nextSibling);

and the using

next.nativeElement.focus();

don't forget to include ElementRef in your imports

import { Component, ElementRef } from '@angular/core';