Componente de mensajes 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 de mensajes en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente Mensajes: Se utiliza para mostrar un mensaje con particular gravedad.

Propiedades del componente de mensajes:

• valor : es una array de mensajes para mostrar. Es de tipo de datos de array, el valor predeterminado es nulo.
• cerrable : Define si el cuadro de mensaje se puede cerrar con el icono de clic. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• style : Establece el estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• styleClass : Establece la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• enableService : Especifica si la visualización de mensajes de servicios está habilitada. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• escape : especifica si los mensajes que se muestran se escaparán o no. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• key : es el Id que coincide con la clave del mensaje para habilitar el alcance en la mensajería basada en servicios. Es de tipo de datos de string, el valor predeterminado es nulo.
• showTransitionOptions : Establece las opciones de transición de la animación del show. Es del tipo de dato booleano, el valor por defecto es 300ms de desaceleración.
• hideTransitionOptions : Establece las opciones de transición de la animación hide. Es del tipo de datos booleano, el valor predeterminado es 200ms cubic-bezier (0.86, 0, 0.07, 1).

Estilo para el componente de mensajes:

• p-messages: Es un elemento contenedor.
• p-message: Es un elemento de mensaje.
• p-message-info: Es un elemento de mensaje cuando se muestran mensajes de información.
• p-message-warn: Es un elemento de mensaje cuando se muestran mensajes de advertencia.
• p-message-error: Es un elemento de mensaje cuando se muestran mensajes de error.
• p-message-success: Es un elemento de mensaje cuando se muestran mensajes de éxito.
• p-message-close: Es un botón de cierre.
• p-message-close-icon: Es un icono de cierre.
• p-message-icon: Es un icono de gravedad.
• p-message-summary: Es un resumen de un mensaje.
• p-mensaje-detalle: Es un detalle de un mensaje.

Propiedades del componente de mensaje:

• severidad : Se utiliza para especificar el nivel de severidad del mensaje. Es de tipo de datos de string, el valor predeterminado es nulo.
• text : Se utiliza para establecer el contenido del texto. Es de tipo de datos de string, el valor predeterminado es nulo.
• escape : si los mensajes que se muestran se escaparían o no. booleano verdadero
• style : se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de string, 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.

Estilo para el componente de mensaje:

• p-inline-message : Es un elemento de mensaje.
• p-inline-message-info : es un elemento de mensaje cuando se muestran mensajes de información.
• p-inline-message-warn: Es un elemento de mensaje cuando se muestran mensajes de advertencia.
• p-inline-message-error : Es un elemento de mensaje cuando se muestran mensajes de error.
• p-inline-message-success : Es un elemento de mensaje cuando se muestran mensajes de éxito.
• p-inline-message-icon : se utiliza para especificar el icono de gravedad.
• p-inline-message-text: Es un mensaje de texto.

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 ilustra cómo usar el componente Mensajes.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Messages Component</h5>
<p-messages [(value)]="gfg" 
  [enableService]="false">
</p-messages>

import { Component } from "@angular/core";
import { Message } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: Message[];
  
  ngOnInit() {
    this.gfg = [
      { detail: "This is a message" },
      { detail: "This is a message" },
      { detail: "This is a message" },
      { detail: "This is a message" },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { MessagesModule } from "primeng/messages";
import { MessageModule } from "primeng/message";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MessagesModule,
    MessageModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, hemos borrado los mensajes usando el botón.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Messages Component</h5>
<p-messages [(value)]="msgs"></p-messages>
<button type="button" (click)="hide()">Hide</button>

import { Component } from "@angular/core";
import { Message } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  msgs = [
    {
      severity: "success",
      summary: "GeeksforGeeks",
      detail: "This is a message",
    },
  ];
  hide() {
    this.msgs = [];
  }
  ngOnInit() {}
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { MessagesModule } from "primeng/messages";
import { MessageModule } from "primeng/message";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MessagesModule,
    MessageModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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