Add more demo examples

demo/src/app/alert.component.ts

+import { Component } from '@angular/core';
+import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
+
+
+@Component({  selector: 'alert',
+  template: `<div class="modal-content">
+                   <div class="modal-header">
+                     <button type="button" class="close" (click)="close()" >&times;</button>
+                     <h4 class="modal-title">{{title || 'Alert'}}</h4>
+                   </div>
+                   <div class="modal-body">
+                     <p>{{message || '!!!'}}</p>
+                   </div>
+                   <div class="modal-footer">
+                     <button type="button" class="btn btn-primary" (click)="close()">OK</button>
+                   </div>
+                 </div>`
+})
+export class AlertComponent extends DialogComponent {
+  constructor(dialogService: DialogService) {
+    super(dialogService);
+  }
+}

demo/src/app/app.component.html

+<div class="container" >
+  <h1 class="text-center">ng2-bootstrap-modal demo application</h1>
+  <div class="row">
+    <div class="col-sm-4 text-right">
+      <b>Alert example: </b>
+    </div>
+    <div class="col-sm-4">
+      <button class="btn btn-default btn-block" (click)=showAlert()>Show alert</button>
+    </div>
+  </div>
+  <br><br>
+  <div class="row">
+    <div class="col-sm-4 text-right">
+      <b>Confirm example: </b>
+    </div>
+    <div class="col-sm-4">
+      <button class="btn btn-default btn-block" (click)=showConfirm()>Show confirm</button>
+    </div>
+    <div class="col-sm-4">
+      <span>Result: </span>
+      <b *ngIf="confirmResult == null" class="text-default">Not answered</b>
+      <b *ngIf="confirmResult != null" [ngClass]="{'text-danger': !confirmResult, 'text-success': confirmResult}">{{confirmResult ? 'Accepted': 'Declined'}}</b>
+    </div>
+  </div>
+  <br><br>
+  <div class="row">
+    <div class="col-sm-4 text-right">
+      <b>Prompt example: </b>
+    </div>
+    <div class="col-sm-4">
+      <button class="btn btn-default btn-block" (click)=showPrompt()>Show prompt</button>
+    </div>
+    <div class="col-sm-4">
+      <span>Your name: </span>
+      <b>{{promptMessage}}</b>
+    </div>
+  </div>
+</div>

demo/src/app/app.component.ts

 import { Component } from '@angular/core';
+import { AlertComponent } from './alert.component';
 import { ConfirmComponent } from './confirm.component';
+import { PromptComponent } from './prompt.component';
 import { DialogService } from "ng2-bootstrap-modal";
 import Timer = NodeJS.Timer;
 
 @Component({
   selector: 'app',
-  template: `
-        <div class="container" >
-          <h1>ng2-bootstrap-modal demo application</h1>
-          <button class="btn btn-default" (click)=showConfirm()>Show confirm</button> 
-          <span>Result: <b>{{ confirmResult }}</b></span>
-        </div>
-      `
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   confirmResult:boolean = null;
-  timeoutId:Timer;
+  promptMessage:string = '';
   constructor(private dialogService:DialogService) {}
+  showAlert() {
+    this.dialogService.addDialog(AlertComponent, {
+      title:'Alert!!!!',
+      message:'TADAM!!!'});
+  }
   showConfirm() {
     let disposable = this.dialogService.addDialog(ConfirmComponent, {
-      title:'Confirm title',
-      message:'Confirm message'})
+      title:'Confirmation',
+      message:'Bla bla comfirm action?'})
       .subscribe((isConfirmed)=>{
         //We get dialog result
         this.confirmResult = !!isConfirmed;
       });
-
-
-
-    //We can close dialog calling disposable.unsubscribe();
-
-    if(this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
-    //If dialog was not closed manually close it by timeout
-    this.timeoutId = setTimeout(()=>{
-      disposable.unsubscribe();
-      this.confirmResult = null;
-    },10000);
+  }
+  showPrompt() {
+    let disposable = this.dialogService.addDialog(PromptComponent, {
+      title:'Name dialog',
+      question:'Enter your name: '})
+      .subscribe((message)=>{
+        //We get dialog result
+        this.promptMessage = message;
+      });
   }
 }

demo/src/app/app.module.ts

@@ -3,20 +3,28 @@ import { CommonModule } from "@angular/common";
 import { BrowserModule } from "@angular/platform-browser";
 import { BootstrapModalModule } from 'ng2-bootstrap-modal';
 import { ConfirmComponent } from './confirm.component';
+import { AlertComponent } from './alert.component';
+import { PromptComponent } from './prompt.component';
+import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 @NgModule({
   declarations: [
     AppComponent,
-    ConfirmComponent
+    AlertComponent,
+    ConfirmComponent,
+    PromptComponent
   ],
   imports: [
     CommonModule,
     BrowserModule,
+    FormsModule,
     BootstrapModalModule
   ],
   //Don't forget add component to entryComponents section
   entryComponents: [
-    ConfirmComponent
+    AlertComponent,
+    ConfirmComponent,
+    PromptComponent
   ],
   bootstrap: [AppComponent]
 })

demo/src/app/confirm.component.ts

 import { Component } from '@angular/core';
 import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
 
+
 @Component({  selector: 'confirm',
   template: `<div class="modal-content">
                    <div class="modal-header">

demo/src/app/prompt.component.ts

+import { Component } from '@angular/core';
+import { DialogComponent, DialogService } from "ng2-bootstrap-modal";
+
+
+@Component({  selector: 'confirm',
+  template: `<div class="modal-content">
+                   <div class="modal-header">
+                     <button type="button" class="close" (click)="close()" >&times;</button>
+                     <h4 class="modal-title">{{title || 'Prompt'}}</h4>
+                   </div>
+                   <div class="modal-body">
+                    <label>{{question}}</label><input type="text" class="form-control" [(ngModel)]="message" name="name" >
+                   </div>
+                   <div class="modal-footer">
+                     <button type="button" class="btn btn-primary" (click)="apply()">OK</button>
+                     <button type="button" class="btn btn-default" (click)="close()" >Cancel</button>
+                   </div>
+                 </div>`
+})
+export class PromptComponent extends DialogComponent {
+  message: string = '';
+  constructor(dialogService: DialogService) {
+    super(dialogService);
+  }
+  apply() {
+    this.result = this.message;
+    this.close();
+  }
+}