Angular PrimeNG BlockUI Panel

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 the Angular PrimeNG BlockUI Panel.

The BlockUI component is used to block the page or panel. It creates a dark overlay over the content of the target when activated. In panel mode, we need to define a local ng-template variable and pass it as the target of the BlockUI component.

Angular PrimeNG BlockUI Panel Properties:

• target: It is used to target the panel which is to be blocked.
• blocked: This property tells if the document is currently blocked. It accepts boolean values.

Syntax:

<p-blockUI
    [target]="..." 
    [blocked]="...">
</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 panel is targeted using the ng-template variable named blockTarget.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG BlockUI Panel</h3>

<button
    pButton
    class="mb-4"
    label="Block the Panel"
    (click)="tempBlock()">
</button>

<p-panel #blockTarget header="About GFG">
    <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>
</p-panel>

<p-blockUI
    [target]="blockTarget"
    [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;
        }, 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 { PanelModule } from 'primeng/panel';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        BlockUIModule,
        ButtonModule,
        PanelModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG BlockUI Panel</h3>

<button
    pButton
    class="mb-4"
    label="Block the Panel"
    (click)="tempBlock()">
</button>

<p-panel #blockTarget header="About GFG">
    <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>
</p-panel>

<p-blockUI [target]="blockTarget" [blocked]="blocked">
    <div class="text-center custom-content">
        <i class="pi pi-lock"></i>
        <p>The panel is blocked for {{time}} seconds</p>
    </div>
</p-blockUI>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `
        .custom-content{
            color: white;
            background-color: green;
            border-radius: 10px;
            padding: 10px;
        }
        `
    ]
})

export class AppComponent {
    blocked: boolean = false;
    time = 3;

    tempBlock() {
        this.blocked = true;
        setTimeout(() => {
            this.blocked = false;
        }, this.time * 1000);
    }
}

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 { PanelModule } from 'primeng/panel';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        BlockUIModule,
        ButtonModule,
        PanelModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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