# EuiBlockDocumentComponent

**Type:** component

<p>EuiBlockDocumentComponent creates a document overlay that can be toggled into
a blocked state. When blocked, a loading indicator is displayed.
Uses OnPush change detection strategy for better performance.</p>
<h4>Typically placed at app root level</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-block-document [isBlocked]=&quot;isProcessing&quot;&gt;&lt;/eui-block-document&gt;</code></pre></div><h4>Trigger blocking from component</h4>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;button euiButton (click)=&quot;blockDocument()&quot;&gt;Process Data&lt;/button&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-ts">import { EuiAppShellService } from &#39;&#64;eui/core&#39;;

private appShellService = inject(EuiAppShellService);
isProcessing = false;

blockDocument(): void {
  this.appShellService.isBlockDocumentActive = true;

  // Simulate async operation
  setTimeout(() =&gt; {
    this.appShellService.isBlockDocumentActive = false;
  }, 2000);
}</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Uses role=&quot;region&quot; for semantic landmark identification</li>
<li>aria-label provides context about the blocked state</li>
<li>Loading indicator is announced to screen readers</li>
<li>Prevents interaction with underlying content when blocked</li>
<li>Focus is trapped within the overlay during blocked state</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Typically controlled via EuiAppShellService.isBlockDocumentActive property</li>
<li>Creates full-page overlay when isBlocked is true</li>
<li>Displays loading spinner automatically during blocked state</li>
<li>Should be placed at application root level for full document coverage</li>
<li>Use for long-running operations that require blocking entire UI</li>
<li>Different from eui-block-content which blocks specific sections</li>
<li>Automatically handles z-index to appear above all content</li>
<li>Consider user experience - use sparingly for truly blocking operations</li>
</ul>


**Selector:** `eui-block-document`

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>ARIA label for the document component.</p>

- **isBlocked**: `boolean` - <p>Controls whether the document is in blocked state.
When true, displays the loading indicator.</p>

