How to implement an Angular Material Dialog in Angular Application.

This Blog has moved from Medium to blogs.tensult.com. All the latest content will be available there. Subscribe to our newsletter to stay updated.

Nowadays uses of Angular material design in Angular application is increasing rapidly. Angular Material gives you nice inbuilt features to design a seamless UI. In this blog, I will explain about the Dialog implementation of Angular Material.

So let’s go ahead, I am assuming that you are already running an Angular application with an Angular Material. If you are not set your Angular application with Angular Material do it from here.

To make the things simpler, we will create two components. The first component will be the source from where we will call another component i.e Dialog component.

Now we create a component named “TestComponent” and update the following in ‘test.component.ts’.

As you can see, we are mentioning the timeout for the dialog, it is totally depends on your requirement. To show the timeout feature availability for the dialog, I am mentioning here the timeout option. If you don’t want close the dialog automatically please ignore the ‘setTimeout()’ function.

Material Dialog Width:

You can specify your dialog ‘width’ and ‘hight’ as per your requirement. Just go through the Test component’s ‘showdialog()’ function under that I already specify the width and height of the dialog.

In the ‘test.component.html’ update with the following.

In the above template, by using the mat-button we are calling the ‘showDialog’ function which will open the dialog popup for us.

In the ‘test.component.css’ mention the following css.

.dialog{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 40px;
}

Now create another component called Dialog Component and update the following in the ‘dialog.component.ts’.

Update Position of the Dialog Modal:

If you want to specify your dialog in the particular position, you can do that by using the ‘updatePosition()’ function. You can use the following parameters to update the position of the dialog within the webpage.

top: use this to update dialog position form top of the page.

bottom: use bottom to update dialog position from the bottom of the page.

right: use right to update dialog position from right of the page.

left: use left to update dialog position from the left of the page.

Note: By default, the dialog popup will open on the center of the page. If you want to change the position of the dialog popup, you can use the above mention parameters to change dialog popup position.

To change the position of the dialog popup, update the following in the ‘dialog.component.ts’.

For now, we are keeping the sample data in the dialog component template, you can mention your template data as per your requirement.

Now design your own style in ‘dialog.component.css’ as per your requirement. For now please mention the following style.

.mat-dialog-actions{
justify-content: flex-end;
}

Refer the below code for the ‘app.module.ts’.

Now create a file ‘app.routing.module.ts’ under that update the file with the following.

After that mention the following in the ‘app.component.html’.

<router-outlet></router-outlet>

You have now successfully created a Material dialog popup. Now run your Angular application and open it on your browser it will show a button just click on that it will open the Angular material dialog popup on the top-right of the page. You can also refer this demo.

You can read our other interesting blog from here. If you have any doubts and queries about this topic, feel free to ask in the response section.