Add autofocus directive, add onShow event emitter.

README.md

@@ -84,6 +84,10 @@ See the example demo projects for [npm](https://github.com/dougludlow/ng2-bs3-mo
 
    Emits when `ModalComponent.dismiss()` is called, or when the modal is dismissed with the keyboard or backdrop. 
 
+- `onOpen: EventEmitter`
+
+   Emits when `ModalComponent.open()` is called.  
+
 #### Methods
 
 - `open(size?: string): Promise`
@@ -197,3 +201,20 @@ export class ParentComponent {
     }
 }
 ```
+
+### Autofocus on a textbox when modal is opened
+
+```html    
+<modal #modal>
+    <modal-header>
+        <h4 class="modal-title">I'm a modal!</h4>
+    </modal-header>
+    <modal-body>
+        <div class="form-group">
+            <label for="textbox">I'm a textbox!</label>
+            <input autofocus type="text" class="form-control" id="textbox">
+        </div>        
+    </modal-body>
+    <modal-footer [show-default-buttons]="true"></modal-footer>
+</modal>
+```

demo/modal-demo.component.html

@@ -53,7 +53,7 @@ <h4 class="modal-title">I'm a modal!</h4>
         </modal-body>
         <modal-footer>
             <button type="button" class="btn btn-default" data-dismiss="modal" (click)="navigateModal.dismiss()" [hidden]="!showDefaultButtons">Close</button>
-            <button type="button" class="btn btn-primary" (click)="navigateModal.close()" [hidden]="!showDefaultButtons">Go</button>
+            <button type="button" class="btn btn-primary" autofocus (click)="navigateModal.close()" [hidden]="!showDefaultButtons">Go</button>
         </modal-footer>
     </modal>
 </section>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-bs3-modal",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Angular2 Boostrap3 Modal Component",
   "main": "ng2-bs3-modal.js",
   "scripts": {

src/ng2-bs3-modal/components/modal.ts

@@ -26,6 +26,7 @@ export class ModalComponent implements AfterViewInit, OnDestroy, CanDeactivate {
     @Input() size: string;
     @Output() onClose: EventEmitter<any> = new EventEmitter(false);
     @Output() onDismiss: EventEmitter<any> = new EventEmitter(false);
+    @Output() onOpen: EventEmitter<any> = new EventEmitter(false);
 
     constructor(private element: ElementRef) {
     }
@@ -37,6 +38,9 @@ export class ModalComponent implements AfterViewInit, OnDestroy, CanDeactivate {
             if (result === ModalResult.Dismiss)
                 this.onDismiss.emit(undefined);
         });
+        this.instance.shown.subscribe(() => {
+            this.onOpen.emit(undefined);
+        });
     }
 
     ngOnDestroy() {

src/ng2-bs3-modal/directives/autofocus.ts

@@ -0,0 +1,13 @@
+import { Directive, ElementRef, OnInit } from 'angular2/core';
+import { ModalComponent } from '../components/modal';
+
+@Directive({
+    selector: '[autofocus]'
+})
+export class AutofocusDirective implements OnInit {
+    constructor(private el: ElementRef, private modal: ModalComponent) {
+        this.modal.onOpen.subscribe(() => {
+            this.el.nativeElement.focus();
+        });
+    }
+}

src/ng2-bs3-modal/ng2-bs3-modal.ts

@@ -4,6 +4,7 @@ import { ModalComponent } from './components/modal';
 import { ModalHeaderComponent } from './components/modal-header';
 import { ModalBodyComponent } from './components/modal-body';
 import { ModalFooterComponent } from './components/modal-footer';
+import { AutofocusDirective } from './directives/autofocus';
 
 export * from './components/modal';
 export * from './components/modal-header';
@@ -15,5 +16,6 @@ export const MODAL_DIRECTIVES: Type[] = [
     ModalComponent,
     ModalHeaderComponent,
     ModalBodyComponent,
-    ModalFooterComponent
+    ModalFooterComponent,
+    AutofocusDirective
 ];