This tutorial is about creating and implementing angular material dialog. We will be using angular 5 provided
MatDialogModule to create a custom dialog with functionality to share data between dialog components, global configurations, entry components with example codes. In the last tutorial, we created a sample material login application and used browser alert to show error messages. We will be using the same application and integrate MatDialogModule in it to show messages in a single page application.
In the previous implementation, we created a login application using material. We had two components login and user component. Once user is successfully logged in, he was being redirected to user page. All the dialog implementation will be in the login component and hence I am sharing the existing code of
login.component.ts here to make our understanding clear.
Material provides MatDialog service to open modal dialogs with Material Design styling and animations by using
open() method.This method accepts the component that will be loaded in the body of the dialog as content and optional configuration object to define dialog configuration such as height, width, position, data and many more. The complete list of config items can be found in the official website.Once, the dialog is opened, angular provides
MatDialogRef that provides reference to it via the MatDialog service. This reference can be used to perform actions on the opened dialog such as closing of the dialog.To get started with the dialog, let us make the necessary configurations first.
1. Import and export MatDialogModule in the existing
material.module.ts. This is a separate file that we created to have all the material module.
2. Create entrycomponents in the
app.module.tsThis will contain the dialog component. The name of our dialog component will be
ErrorDialogComponent that we will be defining is a minute.
3. Now same component needs to be included into the providers.
Now let us create the
error-dialog.component.html which will loaded inside the dialog content.
Here we have data that will be passed as a configuration parameter while opening a component with
open(). This can be used to share data with the dialog component.
Now it is time to define the
Here we have MatDialogRef injected that we discussed above that provides reference to opened dialog via the MatDialog service. This reference can be used to perform actions on the opened dialog such as closing of the dialog.
Similarly we have data that will be injected by the caller and we have
closeDialog() which will be called on the button click and it will close the dialog.
The implementation is done for the dialog and whenever we want to open it we can simply call the
open() method provided by MatDialog. Following is the method to open the dialog
that we implemented above.
In the above code whatever error message we provide that will be displayed in the dialog and also we are passing the width of the dialog as a config parameter. This method will be called whenever an invalid credentials is provided during login.
Open the browser and hit http://localhost:4200then following page will be served.
Now enter invalid credentials and hit Login button then you can see following dialog appears.
In this article we created angular 5 dialog using MatDialog service. In next article we take a look into how to create material table.If you have anything that you want to add or share then please share it below in the comment section.
1. Rxjs Tutorial
2. Building Angular Application
3. Angular Data Table Example
4. Angular Material App
5. Typescript Tutorial
6. Nodejs Basic Tutorial
Contact us: firstname.lastname@example.org