#Descripción El componente RgAlert es un componente de alerta reutilizable diseñado para su uso en aplicaciones Angular que utilizan el framework Angular Material.

#Uso Importación Asegúrate de importar el módulo MatDialogModule en el módulo que contenga tu componente:

import { MatDialogModule } from '@angular/material/dialog';@NgModule({
  // ...  imports: [MatDialogModule],  // ...})
export class AppModule { }

#Uso Para utilizar RgAlert en tu componente, primero, importa el componente:

import { RgAlertComponent } from 'ruta/al/rg-alert.component';

Luego, crea una instancia del servicio MatDialog y llama al método open para mostrar la alerta:

import { MatDialog } from '@angular/material/dialog';// ...constructor(private dialog: MatDialog) { }
// ...openRgAlert(): void {
  const dialogRef = this.dialog.open(RgAlertComponent, {
    data: {
      title: 'Título de la Alerta',      subtitle: 'Subtítulo de la Alerta',      buttons: [
        {
          text: 'Aceptar',          type: 'mat-raised-button',          color: 'primary',          action: () => {
            // Lógica a ejecutar al hacer clic en el botón Aceptar          },        },        // Agrega más botones según sea necesario      ],    },  });}

#IRgAlert El componente espera recibir un objeto de tipo IRgAlert con la siguiente estructura:

export interface IRgAlert {
  title: string;  subtitle: string;  buttons: {
    text: string;    type: 'mat-stroked-button' | 'mat-raised-button' | 'mat-flat-button';    color: 'primary' | 'accent' | 'warn' | '';    action: () => void;  }[];}

title: Título de la alerta. subtitle: Subtítulo o contenido principal de la alerta. buttons: Un array de objetos que representan los botones de la alerta. Cada objeto debe tener un texto (text), un tipo (type), un color (color) y una acción a ejecutar (action) al hacer clic en el botón.

#Estructura del Componente El componente RgAlert consta de tres secciones principales:

Título: Representado por la etiqueta <h1 mat-dialog-title>Contenido: Representado por la etiqueta <div mat-dialog-content>Botones: Representados por la etiqueta <div mat-dialog-actions> y una lista de botones creada mediante la directiva *ngFor

Cada botón se genera utilizando la directiva *ngFor, y su apariencia y comportamiento se definen según las propiedades del objeto de botón