docs(modal): add demo for confirm window (#2814)

* docs(modal): add demo for confirm window

* docs(modal): beautify confirm window demo

demo/src/app/components/+modal/demos/index.ts

@@ -9,6 +9,7 @@ import { DemoModalServiceFromComponent } from './service-component/service-compo
 import { DemoModalServiceNestedComponent } from './service-nested/service-nested';
 import { DemoModalServiceOptionsComponent } from './service-options/service-options';
 import { DemoModalServiceEventsComponent } from './service-events/service-events';
+import { DemoModalServiceConfirmWindowComponent } from './service-confirm-window/service-confirm-window';
 
 export const DEMO_COMPONENTS = [
   DemoModalSizesComponent,
@@ -21,7 +22,8 @@ export const DEMO_COMPONENTS = [
   DemoModalServiceNestedComponent,
   DemoModalServiceOptionsComponent,
   DemoModalEventsComponent,
-  DemoModalServiceEventsComponent
+  DemoModalServiceEventsComponent,
+  DemoModalServiceConfirmWindowComponent
 ];
 
 export const DEMOS = {
@@ -68,5 +70,9 @@ export const DEMOS = {
   serviceEvents: {
     component: require('!!raw-loader?lang=typescript!./service-events/service-events.ts'),
     html: require('!!raw-loader?lang=markup!./service-events/service-events.html')
+  },
+  serviceConfirmWindow: {
+    component: require('!!raw-loader?lang=typescript!./service-confirm-window/service-confirm-window.ts'),
+    html: require('!!raw-loader?lang=markup!./service-confirm-window/service-confirm-window.html')
   }
 };

demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.html

@@ -0,0 +1,10 @@
+<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>
+<br><br>
+<pre>{{message}}</pre>
+<ng-template #template>
+  <div class="modal-body text-center">
+    <p>Do you want to confirm?</p>
+    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
+    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
+  </div>
+</ng-template>

demo/src/app/components/+modal/demos/service-confirm-window/service-confirm-window.ts

@@ -0,0 +1,27 @@
+import { Component, TemplateRef } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+
+@Component({
+  selector: 'demo-modal-service-confirm-window',
+  templateUrl: './service-confirm-window.html'
+})
+export class DemoModalServiceConfirmWindowComponent {
+  modalRef: BsModalRef;
+  message: string;
+  constructor(private modalService: BsModalService) {}
+
+  openModal(template: TemplateRef<any>) {
+    this.modalRef = this.modalService.show(template, {class: 'modal-sm'});
+  }
+
+  confirm(): void {
+    this.message = 'Confirmed!';
+    this.modalRef.hide();
+  }
+
+  decline(): void {
+    this.message = 'Declined!';
+    this.modalRef.hide();
+  }
+}

demo/src/app/components/+modal/modal-section.component.html

@@ -12,6 +12,7 @@ <h2>Contents</h2>
             <li><a routerLink="." fragment="service-component">Component</a></li>
             <li><a routerLink="." fragment="service-nested">Nested</a></li>
             <li><a routerLink="." fragment="service-events">Events</a></li>
+            <li><a routerLink="." fragment="service-confirm-window">Confirm Window</a></li>
             <li><a routerLink="." fragment="service-options">Options</a></li>
           </ul>
         </li>
@@ -77,6 +78,13 @@ <h3 routerLink="." fragment="service-events" id="service-events">Events</h3>
     <demo-modal-service-events></demo-modal-service-events>
   </ng-sample-box>
 
+  <h3 routerLink="." fragment="service-confirm-window" id="service-confirm-window">Confirm window</h3>
+  <p>Modal with buttons to confirm.</p>
+
+  <ng-sample-box [ts]="demos.serviceConfirmWindow.component" [html]="demos.serviceConfirmWindow.html">
+    <demo-modal-service-confirm-window></demo-modal-service-confirm-window>
+  </ng-sample-box>
+
   <h3 routerLink="." fragment="service-options" id="service-options">Options</h3>
   <p>There are some options that you can configure, like animation, backdrop, closing by Esc button, additional css classes. See the demo below to learn how to configure your modal</p>
   <ng-sample-box [ts]="demos.serviceOptions.component" [html]="demos.serviceOptions.html">