Focus Visible

Determine whether focus should be visible based on user interaction.

Import

Import the Focus Visible primitives from ng-primitives/interactions.

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

Usage

Assemble the focus-visible directives in your template.

<div (ngpFocusVisible)="onFocusVisible($event)"></div>

API Reference

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

NgpFocusVisible

• Selector: [ngpFocusVisible]
• Exported As: ngpFocusVisible

Whether listening for focus-visible events is disabled. Event emitted when the focus visible state changes.

Data Attributes

The following data attributes are applied to the ngpFocusVisible directive:

Attribute	Description	Value
data-focus-visible	Whether the element should be visible when focused.	true | false