CngxAutofocus

Reactive autofocus for dynamically inserted elements.

The native autofocus HTML attribute only works on initial page load. This directive handles dynamic content: dialogs, panels, stepper steps, and any element that appears after the initial render.

Focuses the host element after the next render frame using afterNextRender. When when changes to true, focus is re-applied.

Focus on insertion#

@if (showSearch()) {
  <input cngxAutofocus placeholder="Search…" />
}

Conditional focus#

<input [cngxAutofocus]="isActive()" />

With delay for transitions#

<input cngxAutofocus [autofocusDelay]="200" />

https://cngxjs.github.io/cngx/examples/#/common/a11y/autofocus/conditional-focus https://cngxjs.github.io/cngx/examples/#/common/a11y/autofocus/focus-on-insert