{"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<p>The theme of our week so far is that we don&#8217;t always need to think just in terms of components. We saw that <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/when-to-create-a-directive-vs-a-component\/\" target=\"_blank\" rel=\"noopener\" title=\"\">directives<\/a> and <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/the-power-of-angular-selectors\/\" target=\"_blank\" rel=\"noopener\" title=\"\">CSS selectors<\/a> can be powerful tools to keep in mind.<\/p>\n\n\n\n<p>Today, I&#8217;m going to show how modern HTML and <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/template-reference-variables\/\" target=\"_blank\" rel=\"noopener\" title=\"\">template reference variables<\/a> can do a lot of work for us with very little code.<\/p>\n\n\n\n<p>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<p>Here are a few lines of code that makes it all work painlessly:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-30.png\" alt=\"\" class=\"wp-image-500\" width=\"465\" height=\"189\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-30.png 832w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-30-300x122.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/02\/image-30-768x312.png 768w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><code>dialog<\/code> is a modern addition to HTML with a <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/dialog#attributes\" target=\"_blank\" rel=\"noopener\" title=\"\">simple API<\/a>: <code>show()<\/code>, <code>showModal()<\/code>, <code>close()<\/code>. The above code creates a template reference variable <code>#dialog<\/code> to get access to the <code>dialog<\/code> element, and then we call <code>dialog.showModal()<\/code> to open a modal window. That&#8217;s it. No dependency is needed, no CSS trick to create an overlay, no component library, and no jQuery.<\/p>\n\n\n\n<p>Here is a link to a <a href=\"https:\/\/stackblitz.com\/edit\/at-dialog?file=src%2Fapp%2Fapp.component.html\" target=\"_blank\" rel=\"noopener\" title=\"\">fully working example<\/a> and a slighter longer <a href=\"https:\/\/blog.angulartraining.com\/how-to-create-a-simple-modal-dialog-with-angular-277ea7f96da1\" target=\"_blank\" rel=\"noopener\" title=\"\">tutorial with styling information for HTML dialogs<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The theme of our week so far is that we don&#8217;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&#8217;m going to show how modern HTML and template reference variables can do a lot of work for us [&hellip;]<\/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":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=499"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/499\/revisions"}],"predecessor-version":[{"id":509,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/499\/revisions\/509"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}