To begin, add the MatDialogModule to your project. Go to the app module file, add the import statement, and add it to the app.
Using the Dialog Component
Go into a html page and add a button for the trigger. Attach a click event to it so we can click on the button to activate the dialog.
Go into the TypeScript file and define the method for the click event.
Import MatDialog from @angular/material/dialog and inject it in the constructor.
Lastly, call the open method inside the trigger function to active a dialog.
Since we do not have a component for the dialog, we cannot pass anything yet.
Creating the Component for the Dialog
Open the terminal in Visual Studio Code and run the ng generate component command.
Once the component files are generated, pass in the name of the component in the open method.
Angular 8 and Below
If you are using Angular 8 and below, make sure to add the component in the entryComponents array in the app module file.
Since this was not necessary for the material dialog, the component needed to be added to the entryComponents array.
Then go into the TypeScript file for the component and import MAT_DIALOG_DATA from @angular/material/dialog.
Lastly, inject the data inside the constructor by using the inject() decorator. For the type, use the type of the data that was passed in.
If we take a look at our code, we are passing in a number, so the type of our data will be a number.
Now our data is successfully transferred and it can be used within the dialog. For example, we can call it in the TypeScript file or in the HTML file.
For more complex data, we can pass in an JSON object instead.
Greetings Component TypeScript
Greetings Component HTML
Transferring Data Out
To transfer data out from the dialog. Go to the dialog's component TypeScript file and add MatDialogRef to the imports. Then inject it inside the constructor. Inside the angel brackets, pass in the component's name.
Override the ngOnDestroy() method, call the close() method from the DialogRef object, and then pass in the data that you want to transfer.
The results argument represents the data that we passed in the closed method. Every time the dialog closes, it we will get the data.
Instead of closing the dialog by clicking on the dark area around it, we can add a button to close the dialog.
Go into the TypeScript file and define the function and call the close() method.
We can also override the default settings for the dialog.
Inside the JSON object where you passed in the data, add the width and height properties and give them a string value of the dimensions you want.
We can position the dialog by using the position property and setting the top, right, bottom, and left values.
For the full list and details, visit the Angular Material website posted in the description.
©2019 - 2023 Codeible. All rights reserved.