https://github.com/navix/sx-focus-listener
🕸 Advanced focus listener for Angular.
https://github.com/navix/sx-focus-listener
angular focus-management multi-focus
Last synced: 2 months ago
JSON representation
🕸 Advanced focus listener for Angular.
- Host: GitHub
- URL: https://github.com/navix/sx-focus-listener
- Owner: navix
- License: mit
- Created: 2020-05-11T10:37:53.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T04:36:06.000Z (over 1 year ago)
- Last Synced: 2025-02-25T09:07:52.849Z (3 months ago)
- Topics: angular, focus-management, multi-focus
- Language: TypeScript
- Homepage: https://navix.github.io/sx-focus-listener/
- Size: 866 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/@oleksa/sx-focus-listener)
# sx-focus-listener
### 🕸 Advanced focus listener for Angular
Register element in the service and use focus/blur observables.
The service handles focus/blur for one or a group of elements.
If focus moves among elements in a defined group, blur event will not be fired.
Be aware, click on non-focusable elements will cause blur event (focus switch to ``).
## Installation
```
$ npm i @oleksa/sx-focus-listener
```
## Usage
### In templates
```html
Group focused: {{ group.focusListener.focused | json }}
In group!
In group!
In group!
Out of group
Manual registration in group.
Button in group!
Out of group
```
### As a service
```typescript
...
@Component({
...
providers: [SxFocusListener],
})
export class MyComponent {
constructor(
private focusListener: SxFocusListener,
...
) {
}
...
this.focusListener.add(nativeElement1);
this.focusListener.add(nativeElement2);
this.focusListener.add(nativeElement3);
this.focusListener.focus.subscribe((event: any) => {});
this.focusListener.blur.subscribe((event: any) => {});
```
## License
MIT