Using HTML5 dialog element in Angular 2

With Firefox giving the HTML5 dialog element support since early 2022, we can now make use of this HTML 5.2 element to simplify our websites and make our life easier.

It’s usage is very simple, we can add the dialog tags to our page and put some content inside them.

<dialog>
   <p>Testing dialogs</p>
   <button>Ok</button>
</dialog>

Opening and closing the dialog

The dialog won’t display itself by default unless you set the open attribute:

<dialog open>
   <p>Testing dialogs</p>
   <button>Ok</button>
</dialog>

Alternatively, the HTMLDialogElement comes with 3 methods you can call using JavaScript:

var dialog = document.getElementsByTagName("dialog")[0];

// Show() will display it same way as the "open" attribute does, allowing you to still interact 
//    with the rest of HTML elements in the page not behind the dialog.
dialog.show(); 

// This one will open the dialog as a Modal, which won't allow the user to interact 
//    with the rest of the elements, adds a backdrop and can be closed using the ESC button.
dialog.showModal();

// Closes it
dialog.close();

Backdrop

If you display the dialog as a modal, an invisible backdrop will prevent the user from interacting with the UI elements, this backdrop is a pseudo-element that can be styled using CSS:

/* Style all backdrops */
::backdrop {
   opacity: 0.4;
}

/* For dialog backdrops only */
dialog::backdrop{
   ...
}

Some notes

Mozilla recommends using the autofocus property when opening a dialog, be it in one of the input/buttons or in the dialog itself.

There’s a polyfill to help with users still using older versions of the browsers.

Backdrop pseudo-elements are also added as part of the new Popover and Full Screen APIs, they are not supported by all browsers yet, but it’s coming.

Using HTML5 dialogs in Angular 2

Well, they are now browser-native so using them is as simple as adding them to the page and accessing them with plain JS, but you probably want to interact with them from the Angular app, and I can think of many ways of doing this:

• Create your own dialog component with customizable options/methods to use them in your Angular app
• Adding them ad-hoc to the component where you need them and show/display using plain JavaScript
• Use angular binders like *ngIf or [hidden] to display it.

As a quick example, I decided to add a dialog to one of my already existing components, I did not create a component for this as this dialog was only going to be used in this place and as I think keeping things simple always helps. As dialogs are now native, I don’t think we need to over-complicate our codes as there isn’t any code duplication by adding one-use only dialogs to our application:

<button class="btn btn-sm btn-default" (click)="showconfirm = true">Do stuff</button>
<dialog open *ngIf="showConfirm">
    <p>Please confirm you want to do this.</p>
    <button class="btn btn-sm btn-primary" (click)="doStuff()">Yes, I do want to do this</button>
    <button class="btn btn-sm btn-default" (click)="showConfirm = false">Maybe tomorrow</button>
</dialog>

The JavaScript side of this angular component will simply declare a public “showConfirm” property (set to false on load) and there’s the method being called too. The important bit is that the dialog, which is plain HTML, can interact with Angular 2 app same way as any other HTML element, so all Angular attributes and binders are available.

I chose to use the open attribute combined with *ngIf in this example, but you can choose your own approach to it.

Styles are set by bootstrap in this project plus I added some global “dialog” site-themed ones. You can set your own, after all, it’s an HTML element, so styling all dialogs shouldn’t be hard.