Angular 13 pBlock UI overlay not working as expected

UI Components for Angular
Post Reply
primeng
Posts: 1
Joined: 06 Apr 2022, 18:11

06 Apr 2022, 19:27

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
Posts: 2
Joined: 08 Nov 2016, 14:13

18 Jul 2022, 17:13

I faced the same problem, add a primeng theme

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests