Angular Input Focus Attribute Directive
This package is for handling focus on html elements in Angular apps. It is tightly coupled with the DOM but safe to use in server-side rendering settings since we are checking to make sure the directive is running in a browser before using any DOM-specific functions.
Install using NPM:
npm install angular-input-focus --save
Next, import the module in your application module:
Now you're ready to use the directive in your project.
For autofocus-like functionality, you can set
libFocus to true (or a condition):
<!-- Focus First name when control is rendered -->First name:Last name:
You can also pass an
EventEmitter<boolean> to the
setFocus input. Imagine a component called
In the template for
focusEvent emits a value, your element will focus/blur depending on whether the emitted value is
If you're using Angular Material, Change Detection needs to run after setting focus because Angular Material tracks focus; otherwise you will get the dreaded
ExpressionChangedAfterItHasBeenCheckedError exception. If you are using native HTML inputs, you can skip change detection by setting
The main app (
angular-input-focus-tester) is for testing the
angular-input-focus library in the
projects folder. Run
ng serve to build and serve the test app.
To publish a new version of the library to NPM, run
npm run publish-lib. This will do the following:
npm version patchto create a new patch.
- Build the library.
- Copy readme/license from the main project to the library.
- Publish the patch on NPM.