[转]Angular 4|5 Material Dialog with Example

一时失言乱红尘 2022-03-29 02:56 131阅读 0赞

本文转自：[https://www.techiediaries.com/angular-material-dialogs/][https_www.techiediaries.com_angular-material-dialogs]

In this tutorial, we're going to learn how to use the Angular Material Dialog component to build a custom dialog 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.html`and 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_DATA`injection 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.

10 Apr 2018

*  [angular][]
 *  [javascript][]

[Ahmed][https_www.techiediaries.com_angular-material-dialogs] [Follow][] Django developer

[https_www.techiediaries.com_angular-material-dialogs]: https://www.techiediaries.com/angular-material-dialogs/
[angular]: https://www.techiediaries.com/topics/angular/
[javascript]: https://www.techiediaries.com/topics/javascript/
[Follow]: https://twitter.com/ahmed.bouchefra