Angular PrimeNG BlockUI Component

Introduction:

A responsive website may be created with great simplicity using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style.

We will learn how to use the BlockUI component in Angular PrimeNG in this tutorial. BlockUI component is used to block the component or the whole page.

Styling:

p-blockui:  masking element.

p-blockui-document: It is the masking element in full-screen mode.

Properties:

target: 

It is used to specify the name of the local variable for an additional component in a ng-template. It is of the string data type, with documents as the default value.

baseZIndex:

The basic z-Index value for stacking is specified using it. It is of the data type number, and its initial value is 0.

autoZIndex:

It is used to whether to automatically manage the layering. It is of boolean data type, the default value is true.

blocked:

It is used to control the blocked state. It is of the boolean data type, the default value is false.

follow the below ateps to implement BlockUI in angular.

Step 1:

Create project with following command.

ng new blockUIdemo

Step 2:

Install PrimeNG to your application.

npm install primeng --save
npm install primeicons --save

Step 3: 

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BlockUIModule } from "primeng/blockui";
import { PanelModule } from "primeng/panel";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BlockUIModule,
    ButtonModule,
    PanelModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 4:

app.component.html

<h5>PrimeNG BlockUI Component</h5>
  
<button
  type="button"
  pButton
  pRipple
  label="Click Here to Block"
  (click)="test=true">
</button>
<button
  type="button"
  pButton
  pRipple
  label="Click Here to Unblock"
  (click)="test=false">
</button>
  
<p-blockUI [target]="blockui" [blocked]="test">
  <i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>
<p-panel #blockui header="BlockUI" styleClass="p-mt-4">
  <p class="p-m-0">
    A responsive website may be created with great simplicity using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style.
  </p>
  
</p-panel>

Step 5:

app.component.ts

import { Component } from "@angular/core";
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  test: boolean = false;
}