ng-focus-selector

For device like candy, qwerty, tv apps, stb etc where element selection happens with keypad (or) remote, selection of element across the application will become complex.

ng-focus-selector tag wraps application and listen to key events like UP, DOWN, RIGHT & LEFT.

focus-selector class helps in finding out all focusable elements on page.

Based on row and column definition of elements ng-focus-selector understand how to navigate in the page.

Installation

Install via Package managers such as npm or yarn

npm install ng-focus-selector --save
# or
yarn add ng-focus-selector

How to use

Import NgFocusSelectorModule

import { NgFocusSelectorModule } from 'ng-focus-selector';

@NgModule({
  imports: [ NgFocusSelectorModule ]
})

Then in HTML, wrap the app into <ng-focus-selector></ng-focus-selector>

Then in TS to give focus to the desired element

import { FocusSelectorComponent } from 'ng-focus-selector';

constructor(
@Inject(FocusSelectorComponent) private focusSelectorComponent
) {}

ngAfterViewInit() {
this.focusSelectorComponent.setActiveIndex(1);
}

Or focus can be given to element after any async operation

this.httpClient.get().subscribe((data) => {
if(data) {
  this.content = data;

    setTimeout(() => {
      this.focusSelectorComponent.setActiveIndex(1);
    });
  }
})

References

Row & Column

<div class="focus-selector"  row="0">
  ROW 0
</div>

<div
  class="focus-selector"
  *ngFor="let data of [1, 2]; let i = index"
  row="1"
  [attr.column]="i"
>
ROW 1 <br /> COLUMN {{ i }}
</div>

Grid

arr = [
  {row: 0, column:0}, { row: 0, column:1 }, { row: 0, column:2},
  {row: 1, column:0}, { row: 1, column:1 }, { row: 1, column:2},
  {row: 2, column:0}, { row: 2, column:1 }, { row: 2, column:2}
];
<div
  class="focus-selector"
  [attr.row]="data.row"
  isgrid="true"
  [column]="data.column"
  *ngFor="let data of arr; let i = index"
>
</div>

Menu

<ul>
  <li
    class="focus-selector"
    [attr.row]="i"
    column="0"
    *ngFor="let data of [0, 1, 2, 3, 4, 5]; let i = index"
  >
  MENU ITEM {{ i + 1}}
  </li>
</ul>

Page with Tabs & Header

<section>
  <div class="focus-selector" row="0">
    <img src="search" alt="search" />
  </div>
   <div
      class="tabs"
      *ngFor="let tab of tabs; let i = index"
      row="1"
      [column]="i"
      [attr.tabfocus]="false"
      istabheader="true"
      [attr.taburl]="tab.url"
      >
        {{ tab.title | translate }}
    </div>
    <div class="filter">
      ALL
    </div>
    <div
      *ngFor="let content of tabContent; let i = index"
      class="focus-selector"
      column="0"
      [attr.row]="i + 3"
      istabitem="true"
    >
    ROW {{ i }} <br />
    TABINDEX {{ tabIndex }}
    </div>

</section>