Angular Material : creating a pop up modal

Today we are going to talk about creating a pop up modal using Angular Material. so lets go over the set up

Lets start by making sure we have “MatDialogModule” inside of the imports.

Here we have a component that is just a button with a onClick event that call the function “openModal”

First thing to note is the “private dialog: Matdialog” in the constructor. Once we have that we will be able to use this.dialog in our component where we can call the .open() function. This can take one or two parameters, in this case we are passing two. The first parameter being the component we want to use for the modal. Which we created a other component called UserFormComponent, we will show below. The other thing we passed was a dialogconfig, which you can see is a MatDialogConfig. This allows to set certain aspects of the modal that we want. In this case we are setting a default width and height. If we didn’t set this, it would automatically adjust based on the content in the component. If you dont care to make the modal a certain size then you can just pass the component and leave out the dialogConfig option.

One thing I will point out about using this modal, is we have to point the component we are using as the modal (in this case the UserFormComponent) into whats called the entryComponents in the app.modules.ts file.

Our UserFormComponent is just a empty component with a sentence “user-form works!”. This is the result of the code we have

A button on the top left that says “click me”, once clicked will result in a pop up modal that shows our current UserFormComponent contents. There’s a lot of call stuff you can do with this modal and it can add some good user experiences to your application. I will cover more with modals, such as issue that you may encounter and tips to use this effectively in the component based architecture. The Beautiful thing about this is they are re-usable and can fit any where.

Hope that’s was helpful!

Connect with me on linkedIn: www.linkedin.com/in/joshua-markasky47

follow me on Twitter: https://twitter.com/MarkaskyJ

Checkout my YouTube channel: https://www.youtube.com/channel/UCgRkJcniRghYpSpzKQlEYvQ