Lalit Baghel

Software Developer

23rd December, 2022

Trap focus in Angular using the CDK

In this tutorial, we will learn how to trap focus in Angular using the CDK (Component Dev Kit). The CDK provides a suite of tools for building component libraries and applications, and includes features such as overlays, scrolling, and accessibility.

One of the features of the CDK is the ability to trap focus within a particular element or component. This can be useful in situations where you want to prevent users from interacting with elements outside of a specific area, such as a modal or dialog box.

To trap focus in Angular using the CDK, you will need to import the FocusTrap class from the @angular/cdk/a11y module. You can then use the FocusTrap class to create a focus trap around a particular element or component.

Here is an example of how you might use the FocusTrap class to trap focus within a modal:

import { FocusTrap } from '@angular/cdk/a11y';

@Component({
  selector: 'app-modal',
  template: `
    <div class="modal" tabindex="0" cdkTrapFocus>
      <!-- modal content goes here -->
    </div>
  `,
  styles: [`
    .modal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  `]
})
export class ModalComponent {
  constructor(private elementRef: ElementRef) { }

  ngAfterViewInit() {
    this.focusTrap = new FocusTrap(this.elementRef.nativeElement);
    this.focusTrap.focusInitialElement();
  }

  ngOnDestroy() {
    this.focusTrap.destroy();
  }
}

In this example, we are using the cdkTrapFocus directive to mark the element that we want to trap focus within. The FocusTrap class is then used to create a focus trap around the element, and the focusInitialElement method is called to set the initial focus within the focus trap.

Lalit Baghel

Related Tutorial

Trap focus with in a block in Angular by Exclude disabled,hidden and display none elements.

About us

Find Online Tools

Quick links

Social links

Other