Mostrar un cuadro de diálogo de alerta simple en Material Angular

Posterior a investigar en diferentes repositorios y sitios al final hemos descubierto la respuesta que te enseñamos pronto.

Solución:

EDITAR:

También puede usar una referencia de plantilla en el archivo HTML de su componente (o más comúnmente conocida como “vista de componente”) y luego hacer referencia a ella en el archivo TypeScript de su componente y luego pasar esa referencia a MatDialog#open.

Alternativamente, puede acceder a una referencia de la plantilla en la vista de su componente y luego pasarla a un método que haya definido que acepte la referencia.

Si está confundido con lo que acabo de escribir, consulte el código a continuación (el primer cuadro de diálogo muestra la primera oración y el segundo cuadro de diálogo muestra lo que expliqué en la segunda oración)

(Asumiendo la siguiente estructura una vez más)

app/
  app.component.html
  app.component.ts

app.component.html:

Open dialog with reference
Open dialog in code


  
Hello, world!
  
Content for this dialog goes here...
  
    Dismiss
  



  
Hello, second dialog!
  
Interesting note: This template reference was referenced in code with the @ViewChild, which lets you query components/template references in the component view.
  
    Dismiss
  

app.component.ts (acortado):

import  ViewChild, TemplateRef  from '@angular/core';
import  MatDialog  from '@angular/material/dialog';

// ...
export class AppComponent 
  @ViewChild('secondDialog') secondDialog: TemplateRef;

  constructor(private dialog: MatDialog)  

  openDialogWithRef(ref: TemplateRef) 
    this.dialog.open(ref);
  

  openOtherDialog() 
    this.dialog.open(this.secondDialog);
  

Este método puede ahorrarle algunas molestias al crear nuevos componentes solo para los diálogos, así como al declararlos en su módulo. entryComponents.

Sin embargo, esto puede volverse problemático rápidamente si tiene varias plantillas de diálogo en una sola vista de componente.

---

respuesta original

Aquí hay un ejemplo simple como usted solicitó:

(Suponiendo la siguiente estructura)

app/
  my-alert-dialog/
    my-alert-dialog.component.html
    my-alert-dialog.component.ts
  app.component.ts
  app.module.ts

my-alert-dialog.component.html

Unregister?

  
When you unregister, all your data will be removed. Continue?







  
  Cancel
  Unregister

Explicación del código anterior:

• [matDialogTitle] / [mat-dialog-title]: Una directiva (típicamente usada en un h2 elemento) para indicar el título del diálogo.
• [matDialogContent] / [mat-dialog-content] / mat-dialog-content: Una directiva que indica el contenido del diálogo.
• [matDialogActions] / [mat-dialog-actions] / mat-dialog-actions: Una directiva que indica la(s) acción(es) del diálogo.
• [matDialogClose] / [mat-dialog-close]: Una directiva (típicamente usada en un button elemento) que indica que este elemento cuando se hace clic en él debe cerrar el cuadro de diálogo. Opcionalmente, esta directiva puede incluir un parámetro (de any tipo) que luego se puede pasar al componente que abrió este cuadro de diálogo.

my-alert-dialog.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-alert-dialog', // Replace with your own selector
  templateUrl: './my-alert-dialog.component.html'
)
export class MyAlertDialogComponent  

app.component.ts (redactado)

import  MatDialog  from '@angular/material';
import  MyAlertDialogComponent  from './my-alert-dialog/my-alert-dialog.component';
// ...
export class AppComponent 
  constructor(private dialog: MatDialog)  
  unregister() 
    let dialogRef = this.dialog.open(MyAlertDialogComponent);
    dialogRef.afterClosed().subscribe(result => 
      // NOTE: The result can also be nothing if the user presses the `esc` key or clicks outside the dialog
      if (result == 'confirm') 
        console.log('Unregistered');
      
    )
  

app.module.ts (redactado)

import  MatDialogModule  from '@angular/material';
import  MyAlertDialogComponent  from './my-alert-dialog/my-alert-dialog.component';

@NgModule(
  declarations: [
    // ...
    MyAlertDialogComponent
  ],
  imports: [
    // ...
    MatDialogModule
  ],
  entryComponents: [
    // See https://material.angular.io/components/dialog/overview#configuring-dialog-content-via-code-entrycomponents-code- for more info
    MyAlertDialogComponent
  ]
)
export class AppModule  

---

Manifestación

Había usado una Alerta dulce. https://www.freakyjolly.com/angular-sweetalert2-tutorial/#.X2nNxmgzZPY

Es el método más fácil y rápido para crear alertas en angular.

$ npm install --save sweetalert2

Usar import Swal from 'sweetalert2'; en su expediente TS junto con la Alerta Swal.fire('This is a simple and sweet alert')

Valoraciones y reseñas

Recuerda que te concedemos valorar esta sección si descubriste tu atasco .

---

---

Utiliza Nuestro Buscador