Load Material Dialog on page refresh in Angular 9

Question

I have an application, where User is allowed to click on refresh button while filling a form. When user clicks on refresh, a customised angular material dialog need to be loaded, instead of default alert box.

Presently, Hostlistener event is loading a default alert box with the message, "Changes that you have made may not be saved" message. I would like to have angular material dialog instead with a customised message. Also, I want to done away with the default alert box in my application.

Thanks