BlockUI

New

Pause interaction while work is in progress. Block a specific area or the whole page with a customizable overlay.

Area blockingDocument blockingCustom content

Basic

Block the panel while keeping the surrounding controls available.

Profile details

Update your display name. Blocking preserves the form values.

Display name

Document

Without a target, the overlay blocks the whole document. This example automatically unblocks after three seconds.

Usage and API

import { AvBlockUI } from 'avero-ui';

<section #panel>Content to block</section>
<av-block-ui [target]="panel" [blocked]="blockedPanel">
  <span>Processing…</span>
</av-block-ui>

<!-- No target blocks the whole document -->
<av-block-ui [blocked]="blockedDocument" ariaLabel="Saving changes">
  <span>Saving changes…</span>
</av-block-ui>

Import AvBlockUI. Set blocked to activate it. The optional target accepts an HTMLElement or ElementRef; omit it to block the document. Place the blocker outside its target and project any loading indicator or message inside it.

The target receives aria-busy and becomes inert, preventing pointer and keyboard interaction. Document mode uses a native modal dialog. Escape does not dismiss a block: your application controls blocked and must clear it when the operation completes or fails. ariaLabel describes the overlay.

Original busy and inert states are restored on unblock or destruction. Customize --av-block-ui-background, --av-block-ui-color and --av-block-ui-z-index. Keep local targets in a normal page layout; use document mode for a full-page operation.

Reference: PrimeNG BlockUI.