Event output (#43)

* add output event with status information for sticky components

* bump version 1.1.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-sticky-things-demo",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/angular-sticky-things/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w11k/angular-sticky-things",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "peerDependencies": {
     "@angular/common": "^4.0.0 || ^8.0.0",
     "@angular/core": "^4.0.0 || ^8.0.0",

projects/angular-sticky-things/src/lib/sticky-thing.directive.ts

@@ -2,13 +2,15 @@ import {
   AfterViewInit,
   Directive,
   ElementRef,
+  EventEmitter,
   HostBinding,
   HostListener,
   Inject,
   Input,
   isDevMode,
   OnDestroy,
   OnInit,
+  Output,
   PLATFORM_ID
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
@@ -56,8 +58,8 @@ export class StickyThingDirective implements OnInit, AfterViewInit, OnDestroy {
   @Input('boundary') boundaryElement: HTMLElement | undefined;
 
   @HostBinding('class.is-sticky') sticky = false;
-
   @HostBinding('class.boundary-reached') boundaryReached = false;
+  @Output() stickyStatus: EventEmitter<StickyStatus> = new EventEmitter<StickyStatus>();
 
   /**
    * The field represents some position values in normal (not sticky) mode.
@@ -295,6 +297,7 @@ Then pass the spacer element as input:
     } else {
       this.removeSticky();
     }
+    this.stickyStatus.next(status);
   }
 
   private removeSticky(): void {

src/app/home/home.component.scss

@@ -3,6 +3,14 @@
   display: block;
 }
 
+.is-sticky {
+  transform: scale(1.2);
+}
+
+.boundary-reached {
+  transform: scale(1);
+}
+
 section {
   min-height: 100vh;
 }