Is there a way to trigger a Keyboard Event on subscribe in ViewChildren used within a button dropdown nested ul li?
<!-- language: lang-js -->
import { Component, ElementRef, Renderer,ViewChildren,QueryList,AfterViewInit,OnChanges} from '@angular/core';
import {HttpCarService} from './service/vservice';
import {Request} from './model/locationrequest.model';
import {Location} from './model/location.model';
@Component({
selector: 'my-app',
templateUrl: '/app/view/loc.html',
providers: [HttpCarService]
})
export class AppComponent implements AfterViewInit, OnChanges{
public result: string;
public result1: Location[];
public result2: Location[];
public result3: Location[];
public check: boolean;
@ViewChildren('seidropdown')
seidr: QueryList<Location>;
key: KeyboardEvent;
selectedLCItem = 'Select an Item';
public isLocationContextSelected: Boolean;
setFocus(renderer:Renderer){
this._renderer.invokeElementMethod(
this.element.nativeElement, 'focus', []);
return;
}
ngAfterViewInit(){
this.seidr.changes.subscribe((KeyboardEvent.bind(this.setFocus(this._renderer),this.result1)));
}
ngOnChanges(){
}
constructor(httpCarService: HttpCarService, element: ElementRef, public _renderer: Renderer) {
let request = new Request(false, false, true, true, true, true);
httpCarService.getCarsRestful1(request).subscribe(data => this.result1 = data,
err => console.log('ERROR!!!'),
() => console.log('Got response from API', this.result1)
);
this.element = element;
}
processSelectedContext(item: string) {
this.selectedLCItem = item;
this.isLocationContextSelected = true;
}
public element: ElementRef;
public inputEvent(e: KeyboardEvent, isUpMode: boolean = false): void {
let index = 0;
alert('Slice value:' + this.result1.length);
console.log('Key Value' + e.key);
this.seidr.changes.subscribe(e.currentTarget.addEventListener(this.setFocus()));
this.setFocus(this._renderer);
}
public inputEvent1(e: KeyboardEvent, isUpMode: boolean = false): void {
let index = 0;
let e1 = this.element.nativeElement.getElementsByTagName('a');
for (index = 0; index < e1.length; index++) {
let a1 = e1[index].innerHTML.charCodeAt(0);
let a2 = e1[index].innerHTML.charCodeAt(1);
let a3 = e1[index].innerHTML.charCodeAt(6);
let a4 = e1[index].innerHTML.charCodeAt(50);
while (e.keyCode === a1) {
this._renderer.invokeElementMethod(
e1[index], 'focus', []);
return;
}
while (e.keyCode === a2) {
this._renderer.invokeElementMethod(
e1[index], 'focus', []);
return;
}
while (e.keyCode === a3) {
this._renderer.invokeElementMethod(
e1[index], 'focus', []);
return;
}
while (e.keyCode === a4) {
this._renderer.invokeElementMethod(
e1[index], 'focus', []);
return;
}
}
}
}
In this instance, keyboard focus event has been successfully implemented through direct DOM interaction by calling getElementBytag, which may introduce tight coupling in Angular 2.