ngx-focusable v0.0.2

ngx-focusable

Because I'm tired of copying this stuff between projects. https://www.npmjs.com/package/ngx-focusable

About

Use the ngxFocusable directive to easily add focus behaviour to HTML elements that are not focusable by default. Read more about tabindex.

Getting Started

1. Install via npm or yarn

npm i -S ngx-focusable
//------------- OR --------------
yarn add ngx-focusable

2. Import NgxFocusableModule in your application

import { NgxFocusableModule } from 'ngx-focusable';
@NgModule({
  ...
  imports: [NgxFocusableModule],
  ...
})
export class AppModule { }

Usage

Add ngxFocusable directive to your elements as needed. This sets tabindex on the element (can be configured) and gives you an (enter) event for if a user hits Enter while focused on the element.

<!-- Focusable element with tabindex=0 -->
<div ngxFocusable (enter)="onFocusEnter($event)"></div>

<!-- Focusable element with tabindex=2 -->
<div ngxFocusable="2" (enter)="onFocusEnter($event)"></div>

<!-- Conditionally focusable element (isFocusable is boolean) -->
<div [ngxFocusable]="isFocusable" (enter)="onFocusEnter($event)"></div>

<!-- Conditionally focusable element (isFocusable is boolean) -->
<div [ngxFocusable]="isFocusable ? 1 : null" (enter)="onFocusEnter($event)"></div>

Local Development

If you wish to contribute to this repository, below are the steps for local development.

1. Clone the repository git clone https://github.com/cf91/ngx-focusable.git
2. Run npm install to install the dependencies
3. Run npm build to build both the library and demo app and create a link
4. Run npm start to build and watch the demo app (opens the app at http://localhost:4200/ automatically)
5. Run npm watch:lib to build and watch the library

Build

Run npm run build to build the library and demo app together. The build artifacts will be stored in the dist/ directory.

This step is used by CircleCI to build both library and demo app. After a succesful build, a new semantic version of library is published to npm.

Tests

Run npm run test:lib or npm run test:app to execute the unit tests via Karma.