feat(demo): add example for show modal option

demo/src/app/components/+modal/demos/auto-shown/auto-shown.html

@@ -0,0 +1,18 @@
+<button type="button" class="btn btn-primary" (click)="showModal()">Render auto-shown modal</button>
+<div *ngIf="isModalShown" [config]="{ show: true }" (onHidden)="onHidden()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Auto shown modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>I am a modal that is shown right after initialization!</p>
+        <p>I wasn't present in DOM until you clicked the button</p>
+        <p>When you close me, I'll be removed from the DOM</p>
+      </div>
+    </div>
+  </div>
+</div>

demo/src/app/components/+modal/demos/auto-shown/auto-shown.ts

@@ -0,0 +1,23 @@
+import { Component, ViewChild } from '@angular/core';
+import { ModalDirective } from 'ng2-bootstrap/modal';
+
+@Component({
+  selector: 'demo-modal-auto-shown',
+  templateUrl: './auto-shown.html'
+})
+export class DemoAutoShownModalComponent {
+  @ViewChild('autoShownModal') public autoShownModal:ModalDirective;
+  public isModalShown:boolean = false;
+
+  public showModal():void {
+    this.isModalShown = true;
+  }
+
+  public hideModal():void {
+    this.autoShownModal.hide();
+  }
+
+  public onHidden():void {
+    this.isModalShown = false;
+  }
+}

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

@@ -1,9 +1,13 @@
 import { DemoModalSizesComponent } from './sizes/sizes';
 import { DemoModalStaticComponent } from './static/static';
 import { DemoModalChildComponent } from './child/child';
+import { DemoAutoShownModalComponent } from './auto-shown/auto-shown';
 
 export const DEMO_COMPONENTS = [
-  DemoModalSizesComponent, DemoModalChildComponent, DemoModalStaticComponent
+  DemoModalSizesComponent,
+  DemoModalChildComponent,
+  DemoModalStaticComponent,
+  DemoAutoShownModalComponent
 ];
 
 export const DEMOS = {
@@ -18,5 +22,9 @@ export const DEMOS = {
   staticModal: {
     component: require('!!raw-loader?lang=typescript!./static/static.ts'),
     html: require('!!raw-loader?lang=markup!./static/static.html')
+  },
+  autoShown: {
+    component: require('!!raw-loader?lang=typescript!./auto-shown/auto-shown.ts'),
+    html: require('!!raw-loader?lang=markup!./auto-shown/auto-shown.html')
   }
 };

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

@@ -9,7 +9,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   template: `
 <demo-section [name]="name" [src]="src">
   <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
-  
+
   <h2>Contents</h2>
   <ul>
     <li><a routerLink="." fragment="usage">Usage</a></li>
@@ -18,6 +18,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="static">Static modal</a></li>
         <li><a routerLink="." fragment="sizes">Optional sizes</a></li>
         <li><a routerLink="." fragment="child">Child modal</a></li>
+        <li><a routerLink="." fragment="auto-shown">Auto shown modal</a></li>
       </ul>
     </li>
     <li><a routerLink="." fragment="api-reference">API Reference</a>
@@ -27,30 +28,44 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="modal-options">ModalOptions</a></li>
       </ul>
     </li>
-  </ul>   
-      
+  </ul>
+
   <h2 routerLink="." fragment="usage" id="usage">Usage</h2>
 
   <p [innerHtml]="titleDoc"></p>
 
   <h2 routerLink="." fragment="examples" id="examples">Examples</h2>
-      
+
   <h2 routerLink="." fragment="static" id="static">Static modal</h2>
   <ng-sample-box [ts]="demos.staticModal.component" [html]="demos.staticModal.html">
     <demo-modal-static></demo-modal-static>
   </ng-sample-box>
-  
+
   <h2 routerLink="." fragment="sizes" id="sizes">Optional sizes</h2>
   <ng-sample-box [ts]="demos.sizes.component" [html]="demos.sizes.html">
     <demo-modal-sizes></demo-modal-sizes>
   </ng-sample-box>
-   
+
   <h2 routerLink="." fragment="child" id="child">Child modal</h2>
   <p>Control modal from parent component</p>
   <ng-sample-box [ts]="demos.child.component" [html]="demos.child.html">
     <demo-modal-child></demo-modal-child>
   </ng-sample-box>
 
+  <h2 routerLink="." fragment="auto-shown" id="auto-shown">Auto shown modal</h2>
+  <p>
+    Show modal right after it has been initialized.
+    This allows you to keep DOM clean by only appending visible modals to the DOM using <code>*ngIf</code> directive.
+  </p>
+  <p>
+    It can also be useful if you want your modal component to perform some initialization operations, but
+    want to defer that until user actually sees modal content. I.e. for a "Select e-mail recipient" modal
+    you might want to defer recipient list loading until the modal is shown.
+  </p>
+  <ng-sample-box [ts]="demos.autoShown.component" [html]="demos.autoShown.html">
+    <demo-modal-auto-shown></demo-modal-auto-shown>
+  </ng-sample-box>
+
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
   <ng-api-doc routerLink="." fragment="modal-directive" id="modal-directive" directive="ModalDirective"></ng-api-doc>
   <ng-api-doc routerLink="." fragment="modal-backdrop-component" id="modal-backdrop-component" directive="ModalBackdropComponent"></ng-api-doc>