Componente BlockUI de Angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente BlockUI en Angular PrimeNG.

Componente BlockUI: Se utiliza para bloquear el componente o toda la página.

Propiedades:

• bloqueado : Se utiliza para controlar el estado bloqueado. Es del tipo de dato booleano, el valor por defecto es false.
• target : se utiliza para definir el nombre de la variable local ng-template que hace referencia a otro componente. Es de tipo de datos de string, los documentos de valor predeterminado.
• baseZIndex : se usa para definir el valor base del índice z para usar en capas. Es de tipo de dato numérico, el valor por defecto es 0.
• autoZIndex : Sirve para gestionar automáticamente las capas. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• styleClass : Se utiliza para definir la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es falso.

Estilo:

• p-blockui: Es el elemento de enmascaramiento.
• p-blockui-document: Es el elemento de enmascaramiento en modo de pantalla completa.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

  ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

  cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente blockUI.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG BlockUI Component</h5>
<p-blockUI [blocked]="gfg"></p-blockUI>
  
<button
  type="button"
  pButton
  pRipple
  label="Click here to block"
  (click)="geeks()">
</button>

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

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 {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo bloquear un panel en el componente de mensajes.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG BlockUI Component</h5>
  
<button
  type="button"
  pButton
  pRipple
  label="Click Here to Block"
  (click)="gfg=true">
</button>
<button
  type="button"
  pButton
  pRipple
  label="Click Here to Unblock"
  (click)="gfg=false">
</button>
  
<p-blockUI [target]="geeks" [blocked]="gfg">
  <i class="pi pi-lock" style="font-size: 3rem"></i>
</p-blockUI>
<p-panel #geeks header="BlockUI" styleClass="p-mt-4">
  <p class="p-m-0">
    Angular PrimeNG is a framework used with 
    angular to create components with
    great styling and this framework is very 
    easy to use and is used to make
    responsive websites.
  </p>
  
</p-panel>

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

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 {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/blockui