Open In App

Angular PrimeNG BlockUI Document

Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG is a front-end UI toolkit for Angular applications. It has a wide variety of angular components that helps developers to build web applications in less time as they don’t have to make everything from scratch. In this article, we will discuss BlockUI Document in Angular PrimeNG.

The BlockUI component is used to block the page or a panel. It creates a dark overlay over the content of the target when activated. In document mode, it blocks the whole page.

Angular PrimeNG BlockUI Document Properties:

  • blocked: This property tells if the document is currently blocked. It is of boolean type.

 

Syntax:

<p-blockUI [blocked]="true || false"></p-blockUI>

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command.

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

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

Project Structure: After complete installation, the project structure will look like the following:

Project Structure

Example 1: In this example, a button is used to toggle the blocked state of the document. When the button is clicked, it blocks the document for 4 seconds.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG BlockUI Document</h3>
  
<h3>About GFG</h3>
<p>
      GeeksforGeeks is a portal for geeks.
    Here you can share your knowledge 
    with other geeks through articles. 
    There are also many courses which 
    provides you industry ready skills 
    in affordable pricing.
</p>
<button 
    pButton 
    label="Block Document" 
    (click)="tempBlock()">
</button>
<p-blockUI [blocked]="blocked"></p-blockUI>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    blocked: boolean = false;
  
    tempBlock() {
        this.blocked = true;
        setTimeout(() => {
            this.blocked = false;
        }, 4000);
    }
}


app.module.ts




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


Output:

 

Example 2: This example shows the use of custom content with the BlockUI document.

app.component.html




<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG BlockUI Document</h3>
  
<h3>About GFG</h3>
<p>
      GeeksforGeeks is a portal for geeks.
    Here you can share your knowledge 
    with other geeks through articles. 
    There are also many courses which 
    provides you industry ready skills 
    in affordable pricing.
</p>
<button 
    pButton 
    label="Block Document" 
    (click)="tempBlock()">
</button>
  
<p-blockUI [blocked]="blocked">
    <div 
        class="text-center" 
        style="color: whitesmoke; 
        font-size: 20px;">
  
        <i class="pi pi-lock block"></i>
        <p>This document is blocked</p>
    </div>
</p-blockUI>


app.component.ts




import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    blocked: boolean = false;
  
    tempBlock() {
        this.blocked = true;
        setTimeout(() => {
            this.blocked = false;
        }, 3000);
    }
}


app.module.ts




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


Output:

 

Reference: http://primefaces.org/primeng/blockui



Last Updated : 29 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads