ngx-autofocus-fix
Angular 5+ directive for fix autofocus on dynamically created controls (*ngIf
, *ngFor
, etc.).
legacy version for Angular 2/4
Online Demo (Stackblitz.com)
Advantages over the other libraries
- Uses native HTML attribute
autofocus
as the selector! example - There are no custom selectors, no need to change your HTML template.
- Works with native DOM. Doesn't use any dependencies(jQuery, lodash, etc.).
- Configurable. Use can use input attributes or provide global options via
AutofocusFixConfig
- 100% Coverage, over 60 unit tests.
- E2E tests for 8,7,6 and 5 versions of Angular including e2e test for Angular Material Input.
- The library understands an extensive list of input data. (
null/NaN/'true'/[]/...
). See Advanced examples - Supports asynchronous focusing(optionally wrapping
.focus()
execution withsetTimeout()
). - Works perfectly with Angular Material. (there is an E2E test)
- Works with AOT mode. (tested via E2E test)
Installation
Notice: npm package renamed angular-autofocus-fix
-> ngx-autofocus-fix
To install this library, run:
$ npm i ngx-autofocus-fix --save
or
$ yarn add ngx-autofocus-fix
Quick start
- Import the library in your Angular application, for example in
AppModule
:
;; ; // <--- new code ;
- You can now use autofocus directive in app.component.html
Toggle Input
Advanced examples
Ways to disable autofocus: any js-falsy value, except an empty string (default @Input
's normalization mode)
<!-- with data binding --> <!-- undefined value --> <!-- without data binding --> <!-- disabled by default -->
Ways to enable autofocus: any js-truthy value and an empty string (default @Input
's normalization mode)
<!-- an empty string will enable autofocus, this is default HTML behavior --> <!-- this is an empty string too -->
Input's Smart Empty Check normalization mode
All input values are passed through the function: normalizeInputAsBoolean(value: any, smartEmptyCheck = false): boolean
.
Smart Empty Check mode changes the behavior so that the following values are treated as falsy:
- An empty string
''
- An empty object
{}
- An empty array
[]
See Configuration to understand how to enable the mode.
Notes:
- Smart Empty Check normalization mode available only for
autofocus
attribute. All other directive@Input
's always works in the default normalization mode. - Using attribute
autofocus
without any value doesn't enable autofocusing in Smart Empty Check mode. Because of an empty value means an empty string in terms of Angular templates syntax.
Configuration
Options
AutofocusFixDirective
:
There are four ways to configure the 1. Specify attribute-options for specific HTML Element
Normalization(only default) available and binding supported.
2. Specify global options for the whole application by passing it to .forRoot({ ... })
3. Provide Lazy-Route level AutofocusFixConfig
config
;; ;
4. Provide Component level AutofocusFixConfig
config
;; ;
Development
Build the library:
$ npm run build
Publish the library:
cd dist/ngx-autofocus-fixnpm publish
To lint all *.ts
files:
$ npm run lint
To run library unit-tests:
$ npm run test-lib
To run e2e tests:
$ npm run e2e -- --prod=true
To run local dev server http://localhost:4200:
$ npm start$ npm run serve:prod -- angular-8-test # AoT & Prod env
Author
Anton Korniychuk |
---|