Angular PrimeNG BlockUI Document
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
Share your thoughts in the comments
Please Login to comment...