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 Diálogo en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código.
Componente de diálogo: se utiliza para crear un componente que contiene algún contenido para mostrar en una ventana superpuesta.
Propiedades:
- header : Es el texto del título del diálogo. Es de tipo de datos de string, el valor predeterminado es nulo.
- arrastrable: Permite arrastrar para cambiar la posición usando un encabezado. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- keepInViewport: se utiliza para mantener el diálogo en la ventana gráfica. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- redimensionable: Habilita el redimensionamiento del contenido. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- contentStyle: Se utiliza para establecer el estilo de la sección de contenido. Es de tipo de datos de objeto, el valor predeterminado es nulo.
- visible: Especifica la visibilidad del diálogo. Es del tipo de dato booleano, el valor por defecto es falso.
- modal: se utiliza para definir si el fondo debe bloquearse cuando se muestra el diálogo. Es del tipo de dato booleano, el valor por defecto es falso.
- posición: Se utiliza para establecer la posición del diálogo. Es de tipo de datos de string, el valor predeterminado es el centro.
- blockScroll: se utiliza para especificar si el desplazamiento de fondo debe bloquearse cuando el diálogo está visible. Es del tipo de dato booleano, el valor por defecto es falso.
- closeOnEscape: se utiliza para especificar si al presionar la tecla Escape se debe ocultar el diálogo. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- dismissableMask: se utiliza para especificar si al hacer clic en el fondo modal se debe ocultar el cuadro de diálogo. Es de tipo de dato booleano, el valor por defecto es false.
- rtl: cuando el cuadro de diálogo habilitado se muestra en la dirección RTL. Es de tipo de dato booleano, el valor por defecto es false.
- cerrable: se utiliza para establecer el icono de cierre en el encabezado para ocultar el cuadro de diálogo. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- appendTo: se utiliza para configurar el elemento de destino para adjuntar el cuadro de diálogo, los valores válidos son «cuerpo» o una variable de plantilla ng local de otro elemento. Acepta cualquier tipo de dato, el valor por defecto es nulo.
- estilo: Se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
- styleClass: Se utiliza para establecer la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
- maskStyleClass: Se utiliza para establecer la clase de estilo de la máscara. Es de tipo de datos de string, el valor predeterminado es nulo.
- contentStyle: Se utiliza para establecer el estilo Inline del contenido. Es de tipo de datos de objeto, el valor predeterminado es nulo.
- contentStyleClass: Se utiliza para establecer la clase de estilo del contenido. Es de tipo de datos de string, el valor predeterminado es nulo.
- showHeader: Se utiliza para especificar si mostrar o no el encabezado. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- baseZIndex: se usa para establecer el valor base de zIndex para usar en capas. Es de tipo de dato numérico, el valor por defecto es 0.
- autoZIndex: Se utiliza para especificar si se gestionan automáticamente las capas. Es de tipo de datos booleano, el valor predeterminado es verdadero.
- minX: Se utiliza para establecer el valor mínimo para la coordenada izquierda del diálogo al arrastrar. Es de tipo de dato numérico, el valor por defecto es 0.
- minY: se utiliza para establecer el valor mínimo para la coordenada superior del diálogo al arrastrar. Es de tipo de dato numérico, el valor por defecto es 0.
- focusOnShow: se utiliza para especificar el primer botón que recibe el foco en el programa. Es del tipo de dato booleano, el valor predeterminado es verdadero.
- focusTrap: se usa para especificar si los elementos solo pueden enfocarse en elementos dentro del diálogo. Es del tipo de datos booleano, el valor predeterminado es verdadero.
- maximizable: se utiliza para especificar si el diálogo se puede mostrar a pantalla completa. Es del tipo de dato booleano, el valor por defecto es falso.
- breakpoints: Es el objeto literal para definir anchos por tamaño de pantalla. Es del tipo de datos de objeto, el valor predeterminado es nulo.
- TransitionOptions: Se utiliza para establecer las opciones de transición de la animación. Es del tipo de datos de string, el valor predeterminado es 150 ms cubic-bezier (0, 0, 0.2, 1).
- closeIcon: Se utiliza para establecer el nombre del icono de cierre. Es de tipo de datos de string, el valor predeterminado es nulo.
- minimizarIcon: Se utiliza para establecer el nombre del icono de minimizar. Es de tipo de datos de string, el valor predeterminado es pi pi-window-minimize.
- maximizarIcono: Se utiliza para establecer el nombre del icono de maximizar. Es de tipo de datos de string, el valor predeterminado es pi pi-window-maximize.
Eventos:
- onShow : es una devolución de llamada que se activa cuando se muestra el cuadro de diálogo.
- onHide : es una devolución de llamada que se activa cuando el diálogo está oculto.
- onResizeInit : es una devolución de llamada que se activa cuando se inicia el cambio de tamaño del diálogo.
- onResizeEnd : es una devolución de llamada que se activa cuando se completa el cambio de tamaño del diálogo.
- onDragEnd : es una devolución de llamada que se activa cuando se completa el arrastre del diálogo.
- onMaximize : es una devolución de llamada que se activa cuando el diálogo se maximiza o no.
Estilo:
- p-dialog : Es el elemento contenedor.
- p-dialog-titlebar: Es el contenedor de la cabecera.
- p-dialog-title: Es el elemento de cabecera.
- p-dialog-titlebar-icon: Es el contenedor de iconos dentro del encabezado.
- p-dialog-titlebar-close: Es el elemento icono de cierre.
- p-dialog-content : Es el elemento de contenido.
- p-dialog-footer: Es el elemento de pie de página.
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: se verá así:
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Diálogo.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Dialog Component</h5> <p-button (click)="gfg()" label="Click Here"></p-button> <p-dialog header="GeeksforGeeks" [(visible)]="geeks"> <p>Angular PrimeNG Dialog Component</p> </p-dialog>
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 { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.ripple = true;
}
geeks: boolean;
gfg() {
this.geeks = true;
}
}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad position en el componente Dialog.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Dialog Component</h5> <p-button (click)="gfg()" label="Click Here"></p-button> <p-dialog position="top" header="GeeksforGeeks" [(visible)]="geeks"> <p>Angular PrimeNG Dialog Component</p> </p-dialog>
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 { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DialogModule, ButtonModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.ripple = true;
}
geeks: boolean;
gfg() {
this.geeks = true;
}
}
Producción:
Ejemplo 3: En este ejemplo, sabremos cómo usar las propiedades visibles, modales, redimensionables y arrastrables en el componente Diálogo que ayudarán a hacer que el modal se arrastre y redimensione.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Dialog Component</h5> <h6>Modal</h6> <p-button (click)="gfg()" icon="pi pi-external-link" label="View"> </p-button> <p-dialog header="About GeeksforGeeks" [(visible)]="geeks" [modal]="true" [draggable]="true" [resizable]="true"> <p class="p-m-0"> A Computer Science portal for geeks. It contains well written, well thought and well-explained computer science and programming articles. With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, GeeksforGeeks is a one-stop solution. </p> <ng-template pTemplate="footer"> <p-button icon="pi pi-check" (click)="geeks=false" label="OK" class="p-button-text"> </p-button> </ng-template> </p-dialog>
app.component.ts
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.ripple = true;
}
displayModal: boolean;
displayModalDialog() {
this.displayModal = true;
}
}
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 { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DialogModule, ButtonModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/dialog