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 of Panel
</p-panel>

The default value of target is the document object. That means, if no target is provided, the whole page is blocked. As you can also see, it is possible to place any custom content within the p-blockUI tag. The custom content gets displayed on a semi-transparent layer.

We will leverage the CRUD example from the previous section to demonstrate the BlockUI component in action. For the sake of brevity, only two buttons will be available--a Reload button, which performs data fetching, and a Remove button.

Let's specify the blocking as--the Reload button should block the whole page and the Remove button should only block the table. Furthermore, we want to display a loading indicator and the text Loading... as shown in the picture:

These acceptance criteria results in two BlockUI components:

<p-dataTable ... #dtable>
  ...
</p-dataTable>

<p-blockUI [blocked]="blockedTable" [target]="dtable">
  <div class="center">
    <div class="box">
      <div class="content">
        <img src="/assets/data/images/loader.svg"/>
        <h1>Loading...</h1>
      </div>
    </div>
  </div>
</p-blockUI>

<p-blockUI [blocked]="blockedPage">
  <div class="center">
    <div class="box">
      <div class="content">
        <img src="/assets/data/images/loader.svg"/>
        <h1>Loading...</h1>
      </div>
    </div>
  </div>
</p-blockUI>

export class DataTableCrudComponent {
  ...
  selectedEmployee: Employee;
  blockedTable: boolean;
  blockedPage: boolean;

  reload() {
    this.blockedPage = true;
    this.employeeService.getEmployees()
      .finally(() => {this.blockedPage = false;})
      .subscribe(...);
  }

  remove() {
    this.blockedTable = true;
    this.employeeService.deleteEmployee(this.selectedEmployee.id)
      .finally(() => {this.blockedTable = false; 
        this.selectedEmployee = null;})
      .subscribe(...);
    }
}