{"id":86,"date":"2016-05-21T20:26:41","date_gmt":"2016-05-21T20:26:41","guid":{"rendered":"http:\/\/www.dimlucas.com\/?p=86"},"modified":"2016-11-18T10:29:04","modified_gmt":"2016-11-18T10:29:04","slug":"working-with-aurelia-dialog","status":"publish","type":"post","link":"https:\/\/www.dimlucas.com\/index.php\/2016\/05\/21\/working-with-aurelia-dialog\/","title":{"rendered":"Working with aurelia-dialog"},"content":{"rendered":"<p>The Aurelia Dialog is a very useful Aurelia plugin for creating and showing popup dialogs in your Aurelia applications. The official repository can be found <a href=\"https:\/\/github.com\/aurelia\/dialog\">here<\/a>:<\/p>\n<p>aurelia-dialog does not come with the standard Aurelia installation so you need to take some steps before you can use it.<\/p>\n<p>Follow these simple steps to install and start using Aurelia Dialog:<\/p>\n<p>Run<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\n\r\njspm install aurelia-dialog\r\n\r\n<\/pre>\n<p>Go to your Aurelia configuration file (In my demos it&#8217;s main.ts) and add the plugin to the Aurelia configuration object as shown below:<br \/>\n<script src=\"https:\/\/gist.github.com\/dimlucas\/8cfa4ffec5fb0736c9280dbbba6af511.js\"><\/script><\/p>\n<p>The Aurelia Dialog module exports two classes, the\u00a0DialogController\u00a0and the DialogService. We can use the first one to create our own custom dialogs and the latter to trigger those dialogs.<\/p>\n<p>In this tutorial, I am going to use the UserInfo class I introduced in my earlier tutorial about sharing state (link here) and display the user&#8217;s personal information on a custom dialog that&#8217;s triggered when a button is clicked. The dialog will ask the user if the information displayed on it is valid and provide the user with two &#8220;Yes&#8221; or &#8220;No&#8221; buttons for answering. The user&#8217;s answer will then be logged to the console. It&#8217;s a simple example but enough to get you started with creating and managing Aurelia dialogs.<\/p>\n<p>Let&#8217;s start by creating a new folder within our src directory named &#8216;dialog-demo&#8217;. We&#8217;re going to need to add four files to this folder.<br \/>\n\u2022 info-dialog.ts: The view model for our custom &#8216;Personal Information&#8217; dialog<br \/>\n<script src=\"https:\/\/gist.github.com\/dimlucas\/ce985b128be36695266131fab03f44ca.js\"><\/script><br \/>\n\u2022 info-dialog.html: Where we will design our custom dialog<br \/>\n<script src=\"https:\/\/gist.github.com\/dimlucas\/580cd2e0fa557903b1dffd2e32f2aa83.js\"><\/script><br \/>\n\u2022 dialog-demo.ts: The view-model for the page that will host our shiny new popup dialog<br \/>\n<script src=\"https:\/\/gist.github.com\/dimlucas\/2a4bb8ea41d9966a70bfc1536337710c.js\"><\/script><br \/>\n\u2022 dialog-demo.html: Will\u00a0 just contain a button that will trigger the popup<br \/>\n<script src=\"https:\/\/gist.github.com\/dimlucas\/fd80bb1266565d1ba6c706def01411c4.js\"><\/script><\/p>\n<p>&nbsp;<\/p>\n<p>Finally we make the required additions to the\u00a0configureRouter\u00a0method of the App class in app.ts to add our new demo page to the router navigation.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n{ route: 'dialog-demo', name: 'dialog-demo', moduleId: '.\/dialog-demo\/dialog-demo', nav: true, title: 'Dialog Demo' }\r\n<\/pre>\n<p><em>Note<\/em>: At the time of this writing there is still a bug in Aurelia Dialog&#8217;s code that prevents the popup dialog from closing when the user clicks outside the box.<\/p>\n<p>You can view the whole repository <a href=\"https:\/\/github.com\/dimlucas\/aurelia-blog\">here<\/a> for more Aurelia demos<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Aurelia Dialog is a very useful Aurelia plugin for creating and showing popup dialogs in your Aurelia applications. The official repository can be found here: aurelia-dialog does not come with the standard Aurelia installation so you need to take some steps before you can use it. Follow these simple steps to install and start [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[49],"tags":[50,51,56,52,55,54,53],"_links":{"self":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/86"}],"collection":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":12,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/posts\/86\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dimlucas.com\/index.php\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}