Go Angular 4|5 Material Dialog with Example

This article transferred from: https://www.techiediaries.com/angular-material-dialogs/

In this tutorial, we ' re going to learn what the use of 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 the data back from a dialog component,
• How to use the various configuration options for dialogs.

Before starting, first, you'll need to make sure and followed the steps to setup Angular Material for your Angular AP Plication.

Most Angular Material components has their own module so can use a specific component without importing the whole Lib Rary. For Dialog your 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 is ready to create your dialog. The process involves a few steps:

• First, you need-to-import MatDialog and inject in the component constructor where you want to call the dialog,
• Next, you need to create a instance MatDialogConfig of which holds configuration options for the dialog (this was optional, you can Also pass a literal object i.e {...} ),
• Finally you need-to-call the method of the injected instance with the the body of the open() MatDialog dial OG and the Configuration object.

From the final step, you can understand this open() method needs a component as a body so you'll need to create an Angu Lar 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 entry Components 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 Matdialogmoduleproviders: [], bootstrap: [appcomponent], Span class= "NA" >entrycomponents: [dialogbodycomponent ]}) export class appmodule {}                

Step 1:importing and injecting Matdialog

To being able to call the dialog, you'll need to import and inject in the calling component i.e for this MatDialog example Ap Pcomponent:

Import{Component,Inject}From"@angular/core";Import{Matdialog,Matdialogconfig}From"@angular/material";@component ({selector:  " App-root "templateurl: "/app.component.html " styleurls: []}) 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 A nd 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 was used for the title of the dialog,
• mat-dialog-content: This directive are designed for the container of body of this dialog,
• mat-dialog-actions: This directive was designed for the container of the action buttons at the bottom of the dialog

Open and src/dialog-body/dialog-body.html add:

<H2Mat-Dialog-Title>ThisIsADialogTitle</h2><Mat-Dialog-Content><P>place content here </p< Span class= "Err" >></mat-dialog-content> <mat-dialog- actions> <button class< Span class= "o" >= "Mat-raised-button"  (click) Span class= "o" >= "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 is 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 reference and use it to perform the previously mentionned operations MatDialogRef .

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: "})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 is received back in the calling component.

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

Step 5:sending Data to the Dialog Component

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

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

You can also pass objects instead of the 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 this calling the open() method returns a reference to the dialog:

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

This dialog reference have a afterClosed() observable which can be subscribed to. The data passed from the dialog are 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 have to deal with CSS.

2018 APR

• Angular
• Javascript

AhmedfollowDjango Developer

Go Angular 4|5 Material Dialog with Example