{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","results":{"codes":[]},"settings":"","params":[]},"next":{"description":"","pages":[]},"title":"Dialogs","type":"basic","slug":"dialogs","excerpt":"","body":"[block:image]\n{\n \"images\": [\n {\n \"image\": [\n \"https://files.readme.io/AozZ7FIQ0WpClvBs37D2_Screen_Shot_2015-04-17_at_7.27.28_PM_c91f105bb90219228b155fda15b4f1ff9ce58f35_410x202.png\",\n \"Screen_Shot_2015-04-17_at_7.27.28_PM_c91f105bb90219228b155fda15b4f1ff9ce58f35_410x202.png\",\n \"410\",\n \"202\",\n \"#3d6467\",\n \"\"\n ]\n }\n ]\n}\n[/block]\n[Dialogs](https://material.angularjs.org/latest/demo/dialog) are a component of Angular Material.\n\nThis repository gives you a layer of abstraction on top of Angular Material's dialog service.\nThe custom `DialogService` allows you to easily open an alert and a confirm using pre-defined defaults that you can modify in `angular/services/dialog.service.js`.\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"export class LandingController() {\\n\\tconstructor(DialogService){\\n \\t'ngInject';\\n \\n \\tthis.DialogService = DialogService;\\n \\tthis.confirmMessage = '';\\n \\t}\\n\\n\\tsampleAlert(){\\n\\t\\tthis.DialogService.alert('This is an alert title', 'You can specify some description text in here.');\\n\\t}\\n\\n\\t sampleConfirm(){\\n\\t\\tthis.DialogService.confirm('This is a confirm title', 'Are you sure you want to do delete this file?').then(() => {\\n\\t\\t\\t\\tthis.confirmMessage = 'Success callback';\\n\\t\\t\\t}, () => {\\n\\t\\t\\t\\tthis.confirmMessage = 'Cancel callback';\\n\\t\\t\\t}\\n\\t\\t);\\n\\t}\\n\\n}\",\n \"language\": \"javascript\",\n \"name\": \"DialogService example\"\n }\n ]\n}\n[/block]\n# Custom Dialogs\n\nAnother useful feature is the ability to easily call custom dialogs using a folder by feature approach.\n\nLet's start by generating a custom dialog:\n\n```bash\nphp artisan ng:dialog login\n```\n\nThis will create a login folder in `angular/dialogs` with a sample controller and template.\nYou can then open this dialog easily using the following sample code:\n[block:code]\n{\n \"codes\": [\n {\n \"code\": \"(function() {\\n\\t\\\"use strict\\\";\\n\\n\\tangular.module('app.controllers').controller('LoginController', LoginController);\\n \\n function LoginController(DialogService) {\\n\\n var vm = this;\\n \\n vm.customDialog = customDialog;\\n \\n\\t\\tvar customDialog = function() {\\n\\t\\t\\tDialogService.fromTemplate('login');\\n\\t\\t};\\n \\n\\t});\\n\\n})();\\n\",\n \"language\": \"javascript\",\n \"name\": \"Custom Dialog\"\n }\n ]\n}\n[/block]\n\n[block:callout]\n{\n \"type\": \"success\",\n \"body\": \"This example works out of the box.\\nElixir, live-reload, DialogService & Artisan generators all work in harmony to achieve this.\"\n}\n[/block]","updates":["5704122459c5190e000ab681"],"order":1,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"57ffd85f755a2e1700c2bb31","project":"567083021dabd80d00b122ae","version":{"version":"3.4","version_clean":"3.4.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57ffd85f755a2e1700c2bb06","57ffd85f755a2e1700c2bb07","57ffd85f755a2e1700c2bb08","57ffd85f755a2e1700c2bb09","57ffd85f755a2e1700c2bb0a","57ffd85f755a2e1700c2bb0b","57ffd85f755a2e1700c2bb0c","57ffd85f755a2e1700c2bb0d"],"_id":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae","releaseDate":"2016-10-13T18:54:23.018Z","__v":1,"createdAt":"2016-10-13T18:54:23.018Z"},"githubsync":"","user":"567082433a32d20d00c45cab","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Extras","slug":"extras","order":7,"from_sync":false,"reference":false,"_id":"57ffd85f755a2e1700c2bb0d","createdAt":"2015-12-18T23:14:25.130Z","__v":0,"version":"57ffd85f755a2e1700c2bb05","project":"567083021dabd80d00b122ae"},"parentDoc":null,"__v":0,"createdAt":"2015-12-18T23:26:57.118Z"}