Focus

Normalizes the focus event across different browsers and devices.

Import

Import the Focus primitives from ng-primitives/interactions.

import { NgpFocus } from 'ng-primitives/interactions';

Usage

Assemble the focus directives in your template.

<div (ngpFocus)="onFocusChange($event)"></div>

API Reference

The following directives are available to import from the ng-primitives/interactions package:

NgpFocus

This was inspired by the React Aria useFocus hook. https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useFocus.ts#L20

• Selector: [ngpFocus]
• Exported As: ngpFocus

Data Attributes

The following data attributes are applied to the ngpFocus directive:

Disabling Focus Interaction

Many primitives automatically add focus handling to components. If you want to disable focus handling, either globally or on a per-component/per-directive basis, you can do so by registering the provideInteractionConfig provider and setting the focus option to false.

import { provideInteractionConfig } from 'ng-primitives/interactions';

providers: [
  provideInteractionConfig({
    focus: false,
  }),
],