Skip to content

Focus trap

@xngui/cdk/focus-trap
@xngui/cdk/focus-trap

Trap and restore focus inside a container.

Preview

import { XFocusTrapDirective } from '@xngui/cdk/focus-trap';
 
@if (trapOpen()) {
<div [xFocusTrap]="true" [xFocusTrapAutoFocus]="true">
<button>First<button>
<button>Middle<button>
<button (click)="closeTrap()">Close<button>
<div>
}

Events

Interact with the preview — events will appear here.