Component

Block UI

Temporarily blocks a container with overlay, spinner and status message during async work

import { NeuBlockUIComponent, NeuBlockUIDirective } from '@neural-ui/core/block-ui';

Blocked with message

Loading data…

Blocked content

This area becomes inaccessible while blocked.

Overlay variants

default

sample content

light

sample content

dark

sample content

import { NeuBlockUIComponent } from '@neural-ui/core/block-ui';

@Component({
  imports: [NeuBlockUIComponent],
  template: `
    <div style="position: relative">
      <neu-block-ui [blocked]="loading()" message="Loading…" />
      <form><!-- form fields --></form>
    </div>
  `
})
export class MyComponent {
  loading = signal(false);

  async submit() {
    this.loading.set(true);
    await saveData();
    this.loading.set(false);
  }
}