web-dev-qa-db-fra.com

Afficher une boîte de dialogue d'alerte simple dans Material Angular

J'utilise Material Angular (from Angular Material ). Les exemples du site semblent un peu trop compliqués et tous les autres didacticiels sur Internet semblent obsolètes ou utiliser AngularJS à la place. Comment puis-je afficher une alerte simple (tout comme AlertDialog d'Android) avec un titre, un message et un bouton de confirmation/annulation?

angulartypescriptmaterial-designsingle-page-applicationangular-material2
6
Washington A. Ramos

[~ # ~] éditez [~ # ~] :

Vous pouvez également utiliser une référence de modèle dans le fichier HTML de votre composant (ou plus communément appelé "vue de composant"), puis la référencer dans le fichier TypeScript de votre composant, puis transmettre cette référence à MatDialog#open.

Vous pouvez également accéder à une référence du modèle dans la vue de votre composant, puis la transmettre à une méthode que vous avez définie qui accepte la référence.

Si vous êtes confus avec ce que je viens de taper, consultez le code ci-dessous (la première boîte de dialogue illustre la première phrase et la deuxième boîte de dialogue présente ce que j'ai expliqué dans la deuxième phrase)

(En supposant à nouveau la structure suivante)

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

app.component.html:

<button mat-button (click)="openDialogWithRef(firstDialog)">Open dialog with reference</button>
<button mat-button (click)="openOtherDialog()">Open dialog in code</button>

<ng-template #firstDialog>
  <h2 matDialogTitle>Hello, world!</h2>
  <p matDialogContent><em>Content for this dialog goes here...</em></p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>
</ng-template>

<ng-template #secondDialog>
  <h2 matDialogTitle>Hello, second dialog!</h2>
  <p matDialogContent>Interesting note: This template reference was referenced in code with the <code>@ViewChild</code>, which lets you query components/template references in the component view.</p>
  <mat-dialog-actions align="end">
    <button mat-button matDialogClose>Dismiss</button>
  </mat-dialog-actions>

app.component.ts (raccourci):

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

// ...
export class AppComponent {
  @ViewChild('secondDialog') secondDialog: TemplateRef<any>;

  constructor(private dialog: MatDialog) { }

  openDialogWithRef(ref: TemplateRef<any>) {
    this.dialog.open(ref);
  }

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

Cette méthode peut vous éviter des tracas lors de la création de nouveaux composants uniquement pour les boîtes de dialogue, ainsi que leur déclaration dans le entryComponents de votre module.

Cependant, cela peut rapidement devenir gênant si vous avez plusieurs modèles de boîte de dialogue dans une seule vue de composant.

Réponse originale

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

(En supposant 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ée sur un h2 élément) pour indiquer le titre de la boîte de dialogue.
  • [matDialogContent]/[mat-dialog-content]/mat-dialog-content: Une directive indiquant le contenu de la boîte de dialogue.
  • [matDialogActions]/[mat-dialog-actions]/mat-dialog-actions: Une directive indiquant les actions de la boîte de dialogue.
  • [matDialogClose]/[mat-dialog-close]: Une directive (généralement utilisée sur un élément button) indiquant que cet élément lorsque vous cliquez dessus doit fermer la boîte de dialogue. Facultativement, cette directive peut inclure un paramètre (de type any) qui peut ensuite être transmis au composant 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

10
Edric