Angular PrimeNG BlockUI Custom Content

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 see the Angular PrimeNG BlockUI Custom Content.

The BlockUI component is used to block the page or panel. It creates a dark overlay over the content of the target when activated. The Content of the mask can be customized by adding the content inside the BlockUI component.

Syntax:

<p-blockUI
   [target]="..." 
   [blocked]="...">
   Custom-Content
</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, we added the “pi-stop-circle” icon to display as the custom content over the block mask of the panel in Angular PrimeNG.

app.component.html

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

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

<p-panel #panel 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]="panel"
           [blocked]="blocked">
    <i class="pi pi-stop-circle"
       style="font-size: 40px;">
    </i>
</p-blockUI>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    blocked: boolean = false;

    panelBlock() {
        this.blocked = true;
        setTimeout(() => {
            this.blocked = false;
        }, 2000);
    }
}

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 displays the use of the progress spinner as the custom content of the block ui in Angular PrimeNG.

app.component.html

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

<button pButton class="mb-4"
        label="Block the Panel"
        (click)="panelBlock()">
</button>
<p-panel #panel 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]="panel"
           [blocked]="blocked">
    <p-progressSpinner></p-progressSpinner>
</p-blockUI>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    blocked: boolean = false;

    panelBlock() {
        this.blocked = true;
        setTimeout(() => {
            this.blocked = false;
        }, 2000);
    }
}

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';
import { ProgressSpinnerModule }
    from 'primeng/progressspinner';

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

Output:

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