Skip to content

Angular

Start it after the first render, outside the zone.

On this page

Install

npm install open-accessibility-widget

Usage

import { AfterViewInit, Component, NgZone, OnDestroy, inject } from "@angular/core";
import { init, type AccessibilityWidgetInstance } from "open-accessibility-widget";

@Component({ selector: "app-root", templateUrl: "./app.component.html" })
export class AppComponent implements AfterViewInit, OnDestroy {
  private zone = inject(NgZone);
  private widget?: AccessibilityWidgetInstance;

  // Outside the zone: the widget's pointer and keyboard listeners must not run change detection.
  ngAfterViewInit() {
    this.widget = this.zone.runOutsideAngular(() => init({ position: "right" }));
  }

  ngOnDestroy() {
    this.widget?.destroy();
  }
}

Notes

  • runOutsideAngular keeps the widget's listeners from running change detection. Zoneless apps don't need it.
  • With Angular SSR, use afterNextRender or check isPlatformBrowser.

Accessibility statement

Pass statementUrl to link your accessibility statement from the panel's footer.

Edit this page on GitHub