{"id":499,"date":"2023-02-15T05:00:00","date_gmt":"2023-02-15T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=499"},"modified":"2023-02-14T19:50:41","modified_gmt":"2023-02-15T03:50:41","slug":"creating-a-dialog-in-two-lines-of-code","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/creating-a-dialog-in-two-lines-of-code\/","title":{"rendered":"Creating a dialog in two lines of code"},"content":{"rendered":"\n

The theme of our week so far is that we don’t always need to think just in terms of components. We saw that directives<\/a> and CSS selectors<\/a> can be powerful tools to keep in mind.<\/p>\n\n\n\n

Today, I’m going to show how modern HTML and template reference variables<\/a> can do a lot of work for us with very little code.<\/p>\n\n\n\n

Dialogs and modal windows have been a pain to work with for a very long time on the web. Not anymore though.<\/p>\n\n\n\n

Here are a few lines of code that makes it all work painlessly:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

dialog<\/code> is a modern addition to HTML with a simple API<\/a>: show()<\/code>, showModal()<\/code>, close()<\/code>. The above code creates a template reference variable #dialog<\/code> to get access to the dialog<\/code> element, and then we call dialog.showModal()<\/code> to open a modal window. That’s it. No dependency is needed, no CSS trick to create an overlay, no component library, and no jQuery.<\/p>\n\n\n\n

Here is a link to a fully working example<\/a> and a slighter longer tutorial with styling information for HTML dialogs<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The theme of our week so far is that we don’t always need to think just in terms of components. We saw that directives and CSS selectors can be powerful tools to keep in mind. Today, I’m going to show how modern HTML and template reference variables can do a lot of work for us […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,7],"tags":[],"class_list":["post-499","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-template-syntax"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t