Paul Hammant's Blog: Wishing Angular would support HTML5 dialogs better
This applies to Angular2 too, I guess, but I’m interested AngularJS primarily.
Angular doesn’t support the show/hide semantics of HTML5’s dialog element. You can get it to work though, fairly easily.
An inlined example
Press click me, below.
(text below button, and above dialog in source)
(text below dialog in source)
Dialog should now be show (modal style) in the center of the page.
The source for that
Note: Inserted Angular components can’t use {{ in a Jekyll blog because of the latter’s dependence on Liquid (a server-side templating technology), so you have to use <span ng-bind=”op_field”/> instead of {{op_field}} or ng-model=”field” instead of value=”{{field}}” where appropriate. That is slightly less elegant. Alternatively you can change {{ to something else - that is what I’ve done, here, to {({ via $interpolateProvider. Similarly, }} to })}. Of course for regular use of Angular, just shift back to {{op_field}}.
2016 Caveats
Dialog only works for Chrome, Opera and Android browsers. That is 56.46% (Feb 2017) of browsers, and up from 53% at time of writing. So says: caniuse.com.
Therefore, for now, only use HTML5’s dialog for in-house applications where you can dictate the browser in use.