Create a custom BlockUI component and reuse it

custom-blockui-div.md

Create a custom component in your project
Source from: https://stackoverflow.com/questions/52174754/having-a-primeng-blockableui-interfaced-component-with-minimal-style

import { Component, ElementRef, Input } from '@angular/core';
import { BlockableUI } from 'primeng/primeng';

@Component({
  selector: 'app-blockable-div',
  template: `<div [ngStyle]="style" [ngClass]="class" ><ng-content></ng-content></div>`
})
export class BlockableDivComponent implements BlockableUI {

  @Input() style: any;
  @Input() class: any;

  constructor(private el: ElementRef) {
  }

  getBlockableElement(): HTMLElement { 
      return this.el.nativeElement.children[0];
  }
}

Import it in the declarations in the @NgModule you want to use

Use it

<p-blockUI [blocked]="blockUI" [target]="pnl"></p-blockUI>

<app-blockable-div #pnl>
  ...
</app-blockable-div>