Angular 13 pBlock UI overlay not working as expected

[primeng]

Hi

Need help with p-block UI in Angular 13

we are using Angular Block UI to block the complete page for 3 seconds on button click, we are able to show the blocked overlay on button click but unable to remove it after 3 seconds
the overlay stays and can't remove it.

Any help would be appreciated, Thanks in Advance

HTML code:

Code: Select all

<p-blockUI [blocked]="blockedDocument1"></p-blockUI>
<button type="button" pButton pRipple  label="Block page (3s)" (click)="blockDocument()"></button>
 

Typescipt code:

Code: Select all

  blockedDocument1: boolean = false;

  blockDocument() {
    this.blockedDocument1 = true;
    setTimeout(() => {
      this.blockedDocument1 = false;
    }, 3000);
  }

package.json:

Code: Select all

"dependencies": {
    "@angular/animations": "^13.3.0",
    "@angular/cdk": "^11.2.0",
    "@angular/common": "^13.3.0",
    "@angular/compiler": "^13.3.0",
    "@angular/core": "^13.3.0",
    "@angular/forms": "^13.3.0",
    "@angular/platform-browser": "^13.3.0",
    "@angular/platform-browser-dynamic": "^13.3.0",
    "@angular/router": "^13.3.0",
    "bootstrap": "5.1.3",
    "ckeditor4-angular": "^1.3.0",
    "core-js": "^2.6.12",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "jspdf": "^2.5.0",
    "jspdf-autotable": "^3.5.14",
    "jszip": "^3.7.1",
    "ngx-dropzone-wrapper": "^10.0.1",
    "primeflex": "3.1.3",
    "primeicons": "5.0.0",
    "primeng": "13.3.2",
    "rxjs": "^6.6.7",
    "tslib": "^2.3.1",
    "xlsx": "^0.17.4",
    "zone.js": "~0.11.4",
    "web-animations-js": "2.3.2",
    "chart.js": "3.7.0"
  },

[crapupu]

I faced the same problem, add a primeng theme

[RobSchripsema]

I faced the same problem, add a primeng theme

Does that solve the problem?

[RobSchripsema]

I'm finding something very similar. I can initiate the block on a p-panel by setting the trigger variable to true. However, setting the variable back to false does NOT trigger a clearing of the UI.

[srichnz]

I faced the same problem with an upgrade from Angular 11 to 12. My observable returned false once all data was loaded but the block UI would not release.

I fixed it by adding the following primeng theme to styles in angular.json:

Code: Select all

                        "styles": [
                            "node_modules/primeng/resources/themes/saga-blue/theme.css",
                        ],