Angular BlockUI can either block other components or the whole page.
Setup
Refer to PrimeNG setup documentation for download and installation steps for your environment.
Import
import {BlockUIModule} from 'primeng/blockui';
Getting Started
BlockUI is controlled using the blocked property and component to block is defined as target. If target is not provided, document itself is selected as the block target.
export class BlockUIDemo {
blocked: boolean;
}
<p-blockUI [blocked]="blocked"></p-blockUI>
To block a certain component, define a local ng-template variable and bind it to the target option. The target component must implement the BlockableUI interface, otherwise an exception is thrown.
<p-blockUI [blocked]="blockedDocument" [target]="pnl"></p-blockUI>
<p-panel #pnl header="Panel Header">
Content of Panel
</p-panel>
Custom Content
Blocker mask is customized by simply adding the content inside the component
<p-blockUI [target]="pnl" [blocked]="blockedPanel">
<i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>
<p-panel #pnl header="Panel Header">
Content of Panel
</p-panel>
Theming
BlockUI supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeNG BlockUI showcase for demos and documentation.