Blocking page pieces during long-running AJAX calls
The BlockUI component allows us to block any piece of a page, for example, during AJAX calls. The BlockUI component adds a layer over the target element and gives the appearance and behavior of blocking user interaction. It is very handy if you have, for example, a large DataTable component and CRUD operations take much time. You can block almost everything--even the whole page. In this section, we will demonstrate how to deal with BlockUI.
The BlockUI component blocks a blockable target component. The target
property points to a template reference variable of such target component. The visibility of BlockUI is controlled by the Boolean property blocked
. For instance, the following BlockUI blocks the Panel component when the property blocked
is set to true
and unblocks it otherwise:
<p-blockUI [blocked]="blocked" [target]="pnl"> // any custom content or empty </p-blockUI> <p-panel #pnl header="Panel Header"> Content...