Made withAngularClip

Angular Material Tutorial - 26 - Dialog

C

Codevolution

Creator on the Angular channel

Watch on YouTube ↗

145K viewsApr 15, 20199:35 runtime

Learn to implement modal dialogs in your Angular applications with this comprehensive Angular Material tutorial. This guide covers using the MatDialog service, from setting up the MatDialogModule to opening a custom component as a dialog window. You'll discover how to structure…

Chapters

#angular#clip#frontend

Dialog Fundamentals

To use Angular Material Dialogs, you must first import the MatDialogModule into your application module.

Dialogs are opened programmatically using the MatDialog service, which is injected into your component.

import { MatDialog } from '@angular/material/dialog';

constructor(public dialog: MatDialog) {}

Creating and Opening a Dialog

The primary method is dialog.open(ComponentType, config?).

The first argument is the component you want to render inside the dialog.
The second, optional argument is a configuration object.

Important
Any component opened via the MatDialog service must be added to your NgModule's entryComponents array. This tells the Angular compiler to create factories for these components so they can be created at runtime.

Structuring Dialog Content

Angular Material provides directives to structure the content of your dialog for consistent styling:

mat-dialog-title: For the dialog's main heading.
mat-dialog-content: A container for the main body of the dialog. It provides scrolling if the content overflows.
mat-dialog-actions: A container for action buttons, typically aligned to the end (right).

Handling Dialog Results

You can get a result back from a dialog when it is closed.

Closing the Dialog: The mat-dialog-close directive on a button will close the dialog when clicked. You can pass a value to it, which will be the result of the dialog.
```
<button mat-button [matDialogClose]="true">Keep me logged in</button>
<button mat-button [matDialogClose]="false">Log Out</button>
```

Receiving the Result: The dialog.open() method returns a MatDialogRef instance. This reference has an afterClosed() observable that emits the result when the dialog is dismissed.

const dialogRef = this.dialog.open(MyDialogComponent);

dialogRef.afterClosed().subscribe(result => {
  console.log(`Dialog result: ${result}`); // Will be true or false
});

Passing Data to a Dialog

To pass data into a dialog component, follow these two steps:

Provide the data in the open() method's configuration object using the data property.
```
this.dialog.open(MyDialogComponent, {
  data: { name: 'Vishwas' }
});
```
Inject the data into the dialog component's constructor using the MAT_DIALOG_DATA injection token.
```
import { Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
```
You can then access the data in your component's template, for example: Hi {{ data.name }}.

Tip
The dialog configuration object accepts many other properties, such as width, height, and disableClose. Refer to the official Angular Material API documentation for a complete list of options.

Introduction & Initial Setup

Alright guys, in this video we are going to take a look at dialogues in Angular Material. A dialogue is a type of modal window that appears in front of the app content to provide information or ask for information. The usage of a dialog is very similar to that of the snack bar component we looked at in the last video, so this video should be pretty straightforward if you've understood how a snack bar works. Alright, let's get started.

First step, import MatDialogModule and add it to the material array. Next, in the HTML, create a button that can open the dialogue. So, button, add the attribute mat-raised-button, add a click handler which is openDialog, and then the button text is going to be Open Dialog.

Creating and Opening the Dialog

Now let's define the openDialog method.

To be able to actually open the dialogue, we need the MatDialog service. So import MatDialog from @angular/material. After importing, we need to inject it. So constructor, let's go with public dialog of type MatDialog. And then, we can define the openDialog method.

Within the body, we are going to have this.dialog.open. And the open method on dialogue accepts two parameters. The first parameter is a component, and the second parameter is optional configuration. To pass in a component parameter, let's first create it. So in the terminal, we use Angular CLI and run the command ng g for generate, c for component, and the name of the component which is going to be dialog-example. And I'm also going to skip the test files.

The command creates a folder for the component and adds it to the app module, but a component that is used for a dialogue also has to be included in the entryComponents array. So over here, DialogExampleComponent. Now we can pass this component as our parameter. So in app.component.ts, this.dialog.open and the first parameter is going to be DialogExampleComponent.

Structuring Dialog Content

All right, let's go back to the browser and test this out. If I click on the button, a dialog pops up with the content, "dialog-example works!" And this is the HTML corresponding to our dialog example component. Right now we just have a paragraph tag, but there are several directives meant specifically to structure the dialogue content. Let's use them instead.

So in VS Code, I'm going to open the file dialog-example.component.html, and first we specify a dialogue title using the mat-dialog-title directive. So I'm going to add an h2 tag, and the directive is going to be mat-dialog-title. This is going to be Session Timeout.

Next, for the content we have mat-dialog-content. So this is going to be mat-dialog-content and the text is going to be You will be logged out due to inactivity.

Next, for the dialogue actions, we have the mat-dialog-actions. Let's create two buttons, one to stay signed in and one to log out. So, Keep me logged in or Log out.

Now, on both these buttons, if you want the click event to close the dialogue, we need to add the mat-dialog-close directive. So on both the buttons, mat-dialog-close.

Handling Dialog Results

All right, let's test this out. If we go back to the browser and I click on the button, we have the model with the title, content, and the buttons. When I click the button it closes the dialogue as well.

Now we have two buttons intended for different purposes. How would we know whether to log the user out or keep them signed in when the dialog closes on the button click? We can do that using the afterClosed observable, which conveniently returns a result.

So back in VS Code, in the component class, first create a reference to the dialogue. So let dialogRef is going to be this.dialog.open. Now we can subscribe to the observable dialogRef.afterClosed().subscribe. We get a result, and let's simply log that to the console: dialog result is, result.

Finally, we assign a value to the mat-dialog-close directive, which is accessed as the result. So in the HTML for the dialogue, on Keep me logged in button mat-dialog-close is going to be equal to true for the first case and false for logout.

Let's go back to the browser and test this out. I'm going to open the console, click on Open Dialog, and click on Keep me logged in. You can see that it says dialog result true. And click on Log out, it says dialog result false. So in the subscription method, you can have the code that checks for the result: if result is equal to true, keep them signed in, and if result is equal to false, log them out.

Passing Data to a Dialog

The final point to discuss with dialogues is passing in the data to the dialogue component. And there are a couple of steps, so let's go over each of them.

The first step: specify the data as the second parameter to the dialogue open method. So this is going to be an object. The key is going to be data, which in turn is going to be an object. I'm going to pass a name called Vishwas. So this is the second argument to the open method.

Next, open the component class for the dialogue example component. So, dialog-example.component.ts. To access the data in the dialogue component, we have to use the MAT_DIALOG_DATA injection token. So first, import Inject from @angular/core. Next, import MAT_DIALOG_DATA from @angular/material. And then we inject it in the constructor. So, constructor is going to be @Inject, and we are injecting MAT_DIALOG_DATA. And then we say public data of type any. So basically, we are now making the dialogue component capable of receiving any type of data.

Now in the dialogue component HTML, we can simply interpolate the data object. So in mat-dialog-content, I'm going to add Hi {{data.name}}. If you now go back to the browser and click on Open Dialog, you can see that content says, Hi Vishwas, you will be logged out due to inactivity. So we are able to pass data to the dialogue component now.

Configuration Options & Conclusion

Now, if you want to specify height and width for the dialogue, it can be passed into the configuration object. There are a bunch of properties you can use based on your requirement, so I leave that for you guys to explore. Browse the API tab in the documentation and you will find everything you need.

Alright, I hope you now have a good understanding of how to work with dialogues in Angular Material. Thank you guys for watching, don't forget to subscribe, and from the next video, let's get started with data tables.