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.
app.component.html
<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>
app.component.ts
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); } }
app.module.ts
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.
app.component.html
<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>
app.component.ts
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", }) export class AppComponent { gfg: boolean = false; }
app.module.ts
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