[转]Angular 4|5 Material Dialog with Example

We‘ll also see common cases to work with the Angular Material Dialog such as:

• how to create a dialog,
• how to pass data to the dialog component,
• how to get data back from a dialog component,
• how to use various configuration options for dialogs.

Before starting, first, you’ll need to make sure you have followed the steps to setup Angular Material for your Angular application.

Most Angular Material components have their own module so you can use a specific component without importing the whole library. For Dialog you need to import the MatDialogModule module:

import {MatDialogModule} from "@angular/material";

Next you need to add the module to your main module imports array.

/* ... */

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MatDialogModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now you are ready to create your dialog. The process involves a few steps:

• first, you need to import and inject MatDialog in the component constructor where you want to call the dialog,
• next, you need to create an instance of MatDialogConfig which holds configuration options for the dialog (this is optional, you can also pass a literal object i.e {...}),
• finally you need to call the open() method of the injected MatDialog instance with the component to use as the body of the dialog and the configuration object.

From the final step, you can understand that the open() method needs a component as a body so you‘ll need to create an Angular component.

Use the Angular CLI to generate a component:

ng g component dialog-body

Next, you’ll need to import the dialog component in the app module and add it into the declarations and entryComponents arrays:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { MatDialogModule } from "@angular/material";

import { AppComponent } from "./app.component";
import { DialogBodyComponent } from "./dialog-body/dialog-body";

@NgModule({
  declarations: [AppComponent, DialogBodyComponent],
  imports: [BrowserModule, MatDialogModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [DialogBodyComponent]
})
export class AppModule {}

Step 1: Importing and Injecting MatDialog

To be able to call the dialog, you‘ll need to import and inject MatDialog in the calling component i.e for this example AppComponent:

import { Component, Inject } from "@angular/core";
import {
  MatDialog,
  MatDialogConfig
} from "@angular/material";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "Example Angular Material Dialog";

  constructor(private dialog: MatDialog) {}
}

Step 2: Opening the Dialog

Next add the openDialog() method which opens the dialog:

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    this.dialog.open(DialogBodyComponent, dialogConfig);
  }

As we already said, you open the dialog by calling the open() method of the injected MdDialog instance and you pass the dialog component as a parameter and an optional configuration object.

You can pass different configuration option such as:

• data: object or string to send data to the dialog,
• height: set the height of the dialog,
• width: set the width of the dialog,
• disableClose: enable/disable closing the form by clicking outside the dialog,
• autoFocus: if true, automatically sets focus on the first form field etc.

Step 3: Creating the Dialog Component

We have previously generated the dialog body component. Now let‘s use Angular Material directives designed to style the dialog body:

• mat-dialog-title: This directive is used for the title of the dialog,
• mat-dialog-content: this directive is designed for the container of body of this dialog,
• mat-dialog-actions: this directive is designed for the container of the action buttons at the bottom of the dialog

Open src/dialog-body/dialog-body.htmland add:

<h2 mat-dialog-title>This is a Dialog title</h2>

<mat-dialog-content>

<p> Place content here </p>
</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
</mat-dialog-actions>

Step 4: Closing the Dialog and Implementing Action Buttons

The MatDialogRef provides a reference of the opened dialog. This reference can be used to close the dialog and also to notify the calling component when the dialog gets closed. Any component created via MatDialog can inject the MatDialogRef reference and use it to perform the previously mentionned operations.

Now let‘s implement the close button. First import MatDialogRef from @angular/material:

import { MatDialogRef } from "@angular/material";

Next inject MatDialogRef<DialogBodyComponent> as dialogRef.

@Component({
  selector: "dialog-b",
  template: "<h1>Dialog body component</h1>"
})
export class DialogBodyComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogBodyComponent>){}

Finally, you can use this reference to the dialog component to control many aspects such as closing the dialog and sending data back to the parent component etc.

  close() {
    this.dialogRef.close();
  }

You can optionally pass some value which can be received back in the calling component.

    close() {
    this.dialogRef.close("Thanks for using me!");
  }

Step 5: Sending Data to The Dialog Component

To be able to send or more accurately share data with the dialog component, you can use the data option to pass data:

  openDialog() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = "some data";
    let dialogRef = this.dialog.open(DialogBodyComponent, dialogConfig);
  }

You can also pass objects instead of simple string values:

dialogConfig.data = { name: "some name"};

For accessing shared data in your dialog component, you need to use the MAT_DIALOG_DATAinjection token:

import { Component, Inject } from "@angular/core";

import {
  MAT_DIALOG_DATA
} from "@angular/material";

@Component({
  selector: "dialog-b",
  template: "passed in data: "
})
export class DialogBodyComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

Step 6: Receiving Data from The Dialog Component

In the calling component, we can get the data passed from the dialog. From the previous example, you can see that calling the open() method returns a reference to the dialog:

 let dialogRef = this.dialog.open(DialogBodyComponent, dialogConfig);

This dialog reference has a afterClosed() observable which can be subscribed to. The data passed from the dialog is emitted from this observable.

dialogRef.afterClosed().subscribe(value => {
  console.log(`Dialog sent: ${vaue}`); 
});

Conclusion

Dialogs represents an important UI component for most web application and thanks to Angular Material you can quickly craft professional and good looking dialogs without having to deal with CSS.