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...