refactor(docs): log events

Author: simeonoff

src/app/toast/toast.sample.html

@@ -81,6 +81,13 @@ <h4 class="sample-title">Toggle Toast</h4>
 
 <div igxOverlayOutlet #outlet="overlay-outlet"></div>
 
-<igx-toast #toast [outlet]="outlet">
+<igx-toast
+    #toast
+    [outlet]="outlet"
+    (onShowing)="handleShowing($event)"
+    (onShown)="handleShown($event)"
+    (onHiding)="handleHiding($event)"
+    (onHidden)="handleHidden($event)"
+>
     This message will self-destruct in 4 seconds.
 </igx-toast>

src/app/toast/toast.sample.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { IgxToastComponent, IgxToastPosition } from 'igniteui-angular';
 
 @Component({
@@ -7,8 +7,30 @@ import { IgxToastComponent, IgxToastPosition } from 'igniteui-angular';
     templateUrl: 'toast.sample.html',
 })
 export class ToastSampleComponent {
+    @ViewChild('toast')
+    public toast: IgxToastComponent;
+
+    public toastVisibility = false;
+
     showToast(toast: IgxToastComponent, pos: IgxToastPosition) {
         toast.position = pos;
         toast.show();
     }
+
+    handleShowing(event) {
+        console.log('showing toast', event);
+    }
+
+    handleShown(event) {
+        console.log('toast shown', event);
+
+    }
+
+    handleHiding(event) {
+        console.log('toast hiding', event);
+    }
+
+    handleHidden(event) {
+        console.log('toast hidden', event);
+    }
 }