feat(InViewport): export directive to be able to trigger inviewport c…

…heck manually

fix #9

README.md

@@ -135,6 +135,20 @@ Useful if element is within another scrollable element
 </div>
 ```
 
+### Trigger inviewport check manually
+
+Window scroll and resize events doesn't cover all potential use cases for the inViewport status check. For example if using directive inside a carousel. To trigger a check manually simply assign a template variable value to the directive and call `calculateInViewportStatus` when you require.
+
+#### `app.component.html`
+
+```html
+<p snInViewport #foo="snInViewport">
+  Amet tempor excepteur occaecat nulla.
+</p>
+
+<button (click)="foo.calculateInViewportStatus()">Check status</button>
+```
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

src/app/app.component.html

@@ -1,12 +1,32 @@
 <h1>Scroll down ↓ and right →</h1>
+
 <div class="spacer"></div>
-<p class="small-element" snInViewport (inViewportChange)="onInViewportChange($event)" [ngClass]="{'highlight': highlight}">Amet tempor excepteur occaecat nulla. Aute deserunt esse duis velit mollit exercitation nisi officia. Anim do irure cillum esse esse ea magna elit. Velit reprehenderit eiusmod aliqua do reprehenderit elit commodo enim do deserunt consequat ea elit. Incididunt dolore officia consectetur anim ex ea commodo ullamco veniam ipsum esse amet cupidatat commodo. Id consequat duis aliqua minim aliquip enim officia elit. Sint est fugiat ex ex proident ad veniam do excepteur.</p>
+
+<p
+  class="small-element"
+  snInViewport
+  (inViewportChange)="onInViewportChange($event)"
+  [ngClass]="{'highlight': highlight}">
+  Amet tempor excepteur occaecat nulla. Aute deserunt esse duis velit mollit exercitation nisi officia. Anim do irure cillum esse esse ea magna elit. Velit reprehenderit eiusmod aliqua do reprehenderit elit commodo enim do deserunt consequat ea elit. Incididunt dolore officia consectetur anim ex ea commodo ullamco veniam ipsum esse amet cupidatat commodo. Id consequat duis aliqua minim aliquip enim officia elit. Sint est fugiat ex ex proident ad veniam do excepteur.
+</p>
 
 <p class="large-element" snInViewport>very large element</p>
 
+<button (click)="insideScrollable.calculateInViewportStatus()">Check</button>
 <div class="scrollable" #container>
+
   <div class="spacer"></div>
-  <p class="inside-scrollable" snInViewport [parent]="container">Element inside scrollable div</p>
+
+  <p
+    #insideScrollable="snInViewport"
+    class="inside-scrollable"
+    snInViewport
+    [parent]="container">
+    Element inside scrollable div
+  </p>
+
   <div class="spacer"></div>
+
 </div>
+
 <div class="spacer"></div>

src/app/in-viewport/in-viewport.directive.ts

@@ -31,7 +31,8 @@ import * as eventData from './shared/event-data';
  * ```
  */
 @Directive({
-  selector: '[snInViewport]'
+  selector: '[snInViewport]',
+  exportAs: 'snInViewport'
 })
 export class InViewportDirective implements AfterViewInit, OnDestroy {
   /**