Improved modal docs

Author: edcarroll

components/modal/modal.service.ts

@@ -25,7 +25,7 @@ export class SuiModalService {
                 $implicit: modal.context,
                 // `let-modal="modal"`
                 modal: componentRef.instance.controls
-            });
+            })
         }
         // If the config is for a component based modal,
         else if (modal instanceof ComponentModalConfig) {
@@ -59,6 +59,10 @@ export class SuiModalService {
             contentElement.remove();
         }
 
+        // Remove the template div from the DOM. This is to fix some styling issues.
+        const templateElement = modalComponent.templateSibling.element.nativeElement as Element;
+        templateElement.remove();
+
         // Attach the new modal component to the application.
         this._applicationRef.attachView(componentRef.hostView);
 

demo/src/app/pages/modal/modal.page.ts

@@ -12,8 +12,8 @@ const exampleTemplateModalTemplate = `
         <p>{{ context.data }}</p>
     </div>
     <div class="actions">
-        <button class="ui red button" (click)="modal.deny('denied!')">Cancel</button>
-        <button class="ui green button" (click)="modal.approve('approved!')">OK</button>
+        <button class="ui red button" (click)="modal.deny('denied')">Cancel</button>
+        <button class="ui green button" (click)="modal.approve('approved')">OK</button>
     </div>
 </ng-template>
 `;
@@ -153,7 +153,7 @@ export class MyComponent {
 public open(dynamicContent:string = "Example") {
     const config = new TemplateModalConfig<IContext, string, string>(this.modalTemplate);
 
-    config.isClosable = false;
+    config.closeResult = "closed!";
     config.context = { data: dynamicContent };
 
     this.modalService
@@ -195,8 +195,8 @@ export class ConfirmModal extends ComponentModalConfig<IConfirmModalContext, voi
     public componentOpen = `
 this.modalService
     .open(new ConfirmModal("Are you sure?", "Are you sure about accepting this?"))
-    .onApprove(() => alert("accepted!"))
-    .onDeny(() => alert("denied!"));
+    .onApprove(() => alert("User has accepted."))
+    .onDeny(() => alert("User has denied."));
 `;
 }
 
@@ -215,13 +215,13 @@ export class ModalExampleTemplate {
     public open(dynamicContent:string = "Example") {
         const config = new TemplateModalConfig<{ data:string }, string, string>(this.modalTemplate);
 
-        config.isClosable = false;
+        config.closeResult = "dismissed";
         config.context = { data: dynamicContent };
 
         this.modalService
             .open(config)
-            .onApprove(r => alert(r)) 
-            .onDeny(r => alert(r));
+            .onApprove(r => alert(`Accepted with result: '${r}'.`)) 
+            .onDeny(r => alert(`Denied with result: '${r}'.`));
     }
 }
 
@@ -258,8 +258,8 @@ export class ModalExampleComponent {
     public open() {
         this.modalService
             .open(new ConfirmModal("Are you sure?", "Are you sure about accepting this?"))
-            .onApprove(() => alert("accepted!"))
-            .onDeny(() => alert("denied!"));
+            .onApprove(() => alert("User has accepted."))
+            .onDeny(() => alert("User has denied."));
     }
 }