Added examples showing onShown and onHidden output events

README.md

@@ -78,12 +78,15 @@ Example of usage with dynamic html content:
     * `[animation]="true|false"` Indicates if all popover should be shown with animation or not. Default is **true**.
     * `[closeOnMouseOutside]="true|false"` Indicates if popover should be closed when user mouse outside of it. Default is **false**.
     * `[closeOnClickOutside]="true|false"` Indicates if popover should be closed when you click outside of it. Default is **false**.
+    * `(onShown)="popoverShown($event)"` Triggers when popover is shown and passes through reference to popover in `$event`.
+    * `(onHidden)="popoverHidden($event)"` Triggers when popover is hidden and passes through reference to popover in `$event`.
 
 ## Sample
 
 ```typescript
 import {Component} from "@angular/core";
-import {PopoverModule} from "ngx-popover";
+import {PopoverModule, Popover} from "ngx-popover";
+
 
 @Component({
     selector: "app",
@@ -114,7 +117,7 @@ import {PopoverModule} from "ngx-popover";
             Click outside of this popover and it will be dismissed automatically.
         </popover-content>
 
-        <button [popover]="myPopover">click this button to see a popover</button>
+        <button [popover]="myPopover" (onShown)="popoverShown($event)" (onHidden)="popoverHidden($event)">click this button to see a popover</button>
     </div>
 
     <!-- popover show on hover -->
@@ -145,6 +148,16 @@ import {PopoverModule} from "ngx-popover";
 })
 export class App {
 
+  constructor() {}
+
+  popoverShown(popover: Popover) {
+    console.log('Popover shown:', popover);
+  }
+
+  popoverHidden(popover: Popover) {
+    console.log('Popover hidden:', popover);
+  }
+
 }
 
 @NgModule({

sample/sample1-simple-usage/main.ts

@@ -2,6 +2,7 @@ import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
 import {Component, NgModule} from "@angular/core";
 import {PopoverModule} from "../../src/index";
 import {BrowserModule} from "@angular/platform-browser";
+import { Popover } from 'ngx-popover';
 
 @Component({
     selector: "app",
@@ -34,7 +35,7 @@ import {BrowserModule} from "@angular/platform-browser";
             <u (click)="myPopover.hide()">Or click here to close it</u>.
         </popover-content>
 
-        <button [popover]="myPopover">click this button to see a popover</button>
+        <button [popover]="myPopover" (onShown)="popoverShown($event)" (onHidden)="popoverHidden($event)">click this button to see a popover</button>
     </div>
 
     <!-- popover show on hover -->
@@ -72,6 +73,16 @@ import {BrowserModule} from "@angular/platform-browser";
 })
 export class Sample1App {
 
+    constructor() {}
+
+    popoverShown(popover: Popover) {
+        console.log('Popover shown:', popover);
+    }
+
+    popoverHidden(popover: Popover) {
+        console.log('Popover hidden:', popover);
+    }
+
 }
 
 @NgModule({