Afficher une simple boîte de dialogue d'alerte de Matériel Angulaire

Voici un exemple simple comme vous l'avez demandé:

(En supposant que la structure suivante)

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

<h2 matDialogTitle>Unregister?</h2>
<mat-dialog-content>
  <p>When you unregister, all your data will be removed. Continue?</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <!--
    Note that you can pass in anything to the `matDialogClose` attribute. This also includes objects, arrays, etc.
    Just make sure that you make it a property binding with those [] brackets
    Example: <button mat-button [matDialogClose]="{'lol': true}">Cancel</button>
  -->
  <button mat-button matDialogClose="cancel" color="primary">Cancel</button>
  <button mat-button matDialogClose="confirm" color="warn">Unregister</button>
</mat-dialog-actions>

Explication du code ci-dessus:

• [matDialogTitle] /[mat-dialog-title]: Une directive (généralement utilisé sur un h2 élément) pour l'indication de la boîte de dialogue du titre.
• [matDialogContent] /[mat-dialog-content] /mat-dialog-content: Une directive indiquant la boîte de dialogue contenu.
• [matDialogActions] /[mat-dialog-actions] /mat-dialog-actions: Une directive indiquant la boîte de dialogue action(s).
• [matDialogClose] /[mat-dialog-close]: Une directive (généralement utilisé sur un button élément), indiquant que cet élément lorsque l'on clique dessus devrait fermer la boîte de dialogue. En option, cette directive permet d'inclure un paramètre (de any type) qui peut être ensuite transmis à la composante qui a ouvert cette boîte de dialogue.

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 (expurgé)

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 (expurgé)

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 { }

---

Démo