Focus Trap

The Focus Trap utility is a directive that traps focus within a specified element. This is useful for modals, dropdowns, and other components that require focus to be contained within a specific area.

<div [ngpFocusTrapDisabled]="disabled()" ngpFocusTrap>
  <button (click)="disabled.set(false)" ngpButton>Enable Focus Trap</button>
  <button (click)="disabled.set(true)" ngpButton>Disable Focus Trap</button>
</div>

Import

Import the FocusTrap primitives from ng-primitives/focus-trap.

import { NgpFocusTrap } from 'ng-primitives/focus-trap';

Usage

Assemble the focus-trap directives in your template.

<div ngpFocusTrap></div>

API Reference

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

NgpFocusTrap

The NgpFocusTrap directive traps focus within the host element.

• Selector: [ngpFocusTrap]
• Exported As: ngpFocusTrap

Data Attributes

Accessibility

Adheres to the WAI-ARIA design pattern.