Modification composant in viewport

dist/bundles/aitp-utils.umd.js

@@ -10,19 +10,24 @@
    * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
    */
   var InViewportComponent = /** @class */ (function () {
-    function InViewportComponent() {
+    function InViewportComponent(changeDetectorRef) {
+      this.changeDetectorRef = changeDetectorRef;
     }
 
     /**
-     * @param {?} event
+     * @param {?} intersectionObserverEntry
      * @return {?}
      */
     InViewportComponent.prototype.onViewportChange = /**
-     * @param {?} event
+     * @param {?} intersectionObserverEntry
      * @return {?}
      */
-    function (event) {
-      console.log(event);
+    function (intersectionObserverEntry) {
+      if (intersectionObserverEntry.isIntersecting) {
+        this.changeDetectorRef.reattach();
+      } else {
+        this.changeDetectorRef.detach();
+      }
     };
     InViewportComponent.decorators = [
       {
@@ -32,6 +37,12 @@
         }]
       }
     ];
+    /** @nocollapse */
+    InViewportComponent.ctorParameters = function () {
+      return [
+        {type: core.ChangeDetectorRef}
+      ];
+    };
     return InViewportComponent;
   }());
 

dist/bundles/aitp-utils.umd.min.js

-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("aitp-utils",["exports","@angular/common","@angular/core","rxjs","rxjs/operators"],t):t(e["aitp-utils"]={},e.ng.common,e.ng.core,e.rxjs,e.rxjs.operators)}(this,function(e,n,r,t,o){"use strict";var i=function(){function e(){}return e.prototype.onViewportChange=function(e){console.log(e)},e.decorators=[{type:r.Component,args:[{selector:"aiut-in-viewport",template:'<div (inViewport)="onViewportChange($event)" aiutInViewport>\r\n  <ng-content></ng-content>\r\n</div>\r\n'}]}],e}(),s=function(){function e(){this.options={rootMargin:"0px 0px 0px 0px",threshold:[.5]},this.callback$=new t.Subject,this.observer=new IntersectionObserver(this.handler.bind(this),this.options)}return e.prototype.observe=function(t){var e=this;return this.observer.observe(t),this.callback$.asObservable().pipe(o.filter(function(e){return e.target===t}),o.finalize(function(){return e.observer.unobserve(t)}))},e.prototype.handler=function(e){var t=this;e.forEach(function(e){return t.callback$.next(e)})},e.decorators=[{type:r.Injectable}],e.ctorParameters=function(){return[]},e}(),p=Symbol("destroy$"),c=function(e){return e[p]===undefined&&u(e),o.takeUntil(e[p])};function u(n){n[p]=new t.Observable(function(e){var t=n.ngOnDestroy;if(null==t)throw new Error("untilDestroy operator needs the component to have an ngOnDestroy method");return n.ngOnDestroy=function(){e.next(),e.complete(),t.call(n)},function(e){return n[p]=undefined}})}var a=function(){function e(e,t,n){this.elementRef=e,this.viewportService=t,this.platformId=n,this.preRender=!0,this.oneTime=!1,this.inViewport=new r.EventEmitter}return e.prototype.ngOnInit=function(){var t=this;n.isPlatformBrowser(this.platformId)?this.oneTime?this.viewportService.observe(this.elementRef.nativeElement).pipe(c(this),o.filter(function(e){return.5<=e.intersectionRatio}),o.take(1)).subscribe(function(e){t.inViewport.emit(e)}):this.viewportService.observe(this.elementRef.nativeElement).pipe(c(this)).subscribe(function(e){t.inViewport.emit(e)}):this.preRender&&this.inViewport.emit({isIntersecting:!0,intersectionRatio:1})},e.prototype.ngOnDestroy=function(){},e.decorators=[{type:r.Directive,args:[{selector:"[aiutInViewport]"}]}],e.ctorParameters=function(){return[{type:r.ElementRef},{type:s},{type:Object,decorators:[{type:r.Inject,args:[r.PLATFORM_ID]}]}]},e.propDecorators={preRender:[{type:r.Input}],oneTime:[{type:r.Input}],inViewport:[{type:r.Output}]},e}(),l=function(){function e(){}return e.decorators=[{type:r.NgModule,args:[{imports:[n.CommonModule],declarations:[a,i],providers:[s],exports:[a,i]}]}],e}();e.AitpUtilsModule=l,e.InViewportComponent=i,e.InViewportDirective=a,e.addDestroyObservableToComponent=u,e.destroy$=p,e.untilDestroy=c,e.ViewportService=s,e.ɵb=i,e.ɵa=a,e.ɵc=s,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("rxjs"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("aitp-utils",["exports","@angular/common","@angular/core","rxjs","rxjs/operators"],t):t(e["aitp-utils"]={},e.ng.common,e.ng.core,e.rxjs,e.rxjs.operators)}(this,function(e,r,n,t,o){"use strict";var i=function(){function e(e){this.changeDetectorRef=e}return e.prototype.onViewportChange=function(e){e.isIntersecting?this.changeDetectorRef.reattach():this.changeDetectorRef.detach()},e.decorators=[{type:n.Component,args:[{selector:"aiut-in-viewport",template:'<div (inViewport)="onViewportChange($event)" aiutInViewport>\r\n  <ng-content></ng-content>\r\n</div>\r\n'}]}],e.ctorParameters=function(){return[{type:n.ChangeDetectorRef}]},e}(),s=function(){function e(){this.options={rootMargin:"0px 0px 0px 0px",threshold:[.5]},this.callback$=new t.Subject,this.observer=new IntersectionObserver(this.handler.bind(this),this.options)}return e.prototype.observe=function(t){var e=this;return this.observer.observe(t),this.callback$.asObservable().pipe(o.filter(function(e){return e.target===t}),o.finalize(function(){return e.observer.unobserve(t)}))},e.prototype.handler=function(e){var t=this;e.forEach(function(e){return t.callback$.next(e)})},e.decorators=[{type:n.Injectable}],e.ctorParameters=function(){return[]},e}(),c=Symbol("destroy$"),a=function(e){return e[c]===undefined&&p(e),o.takeUntil(e[c])};function p(r){r[c]=new t.Observable(function(e){var t=r.ngOnDestroy;if(null==t)throw new Error("untilDestroy operator needs the component to have an ngOnDestroy method");return r.ngOnDestroy=function(){e.next(),e.complete(),t.call(r)},function(e){return r[c]=undefined}})}var u=function(){function e(e,t,r){this.elementRef=e,this.viewportService=t,this.platformId=r,this.preRender=!0,this.oneTime=!1,this.inViewport=new n.EventEmitter}return e.prototype.ngOnInit=function(){var t=this;r.isPlatformBrowser(this.platformId)?this.oneTime?this.viewportService.observe(this.elementRef.nativeElement).pipe(a(this),o.filter(function(e){return.5<=e.intersectionRatio}),o.take(1)).subscribe(function(e){t.inViewport.emit(e)}):this.viewportService.observe(this.elementRef.nativeElement).pipe(a(this)).subscribe(function(e){t.inViewport.emit(e)}):this.preRender&&this.inViewport.emit({isIntersecting:!0,intersectionRatio:1})},e.prototype.ngOnDestroy=function(){},e.decorators=[{type:n.Directive,args:[{selector:"[aiutInViewport]"}]}],e.ctorParameters=function(){return[{type:n.ElementRef},{type:s},{type:Object,decorators:[{type:n.Inject,args:[n.PLATFORM_ID]}]}]},e.propDecorators={preRender:[{type:n.Input}],oneTime:[{type:n.Input}],inViewport:[{type:n.Output}]},e}(),f=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{imports:[r.CommonModule],declarations:[u,i],providers:[s],exports:[u,i]}]}],e}();e.AitpUtilsModule=f,e.InViewportComponent=i,e.InViewportDirective=u,e.addDestroyObservableToComponent=p,e.destroy$=c,e.untilDestroy=a,e.ViewportService=s,e.ɵb=i,e.ɵa=u,e.ɵc=s,Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=aitp-utils.umd.min.js.map
\ No newline at end of file

dist/esm2015/lib/components/in-viewport/in-viewport.component.js

@@ -2,15 +2,26 @@
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-import {Component} from '@angular/core';
+import {ChangeDetectorRef, Component} from '@angular/core';
 
 export class InViewportComponent {
   /**
-   * @param {?} event
+   * @param {?} changeDetectorRef
+   */
+  constructor(changeDetectorRef) {
+    this.changeDetectorRef = changeDetectorRef;
+  }
+
+  /**
+   * @param {?} intersectionObserverEntry
    * @return {?}
    */
-  onViewportChange(event) {
-    console.log(event);
+  onViewportChange(intersectionObserverEntry) {
+    if (intersectionObserverEntry.isIntersecting) {
+      this.changeDetectorRef.reattach();
+    } else {
+      this.changeDetectorRef.detach();
+    }
   }
 }
 InViewportComponent.decorators = [
@@ -21,4 +32,15 @@ InViewportComponent.decorators = [
     }]
   }
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tdmlld3BvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYWl0cC11dGlscy8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2luLXZpZXdwb3J0L2luLXZpZXdwb3J0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQU14QyxNQUFNLE9BQU8sbUJBQW1COzs7OztJQUU5QixnQkFBZ0IsQ0FBQyxLQUFLO1FBQ3BCLE9BQU8sQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDckIsQ0FBQzs7O1lBUkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxrQkFBa0I7Z0JBQzVCLHVIQUEyQzthQUM1QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYWl1dC1pbi12aWV3cG9ydCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2luLXZpZXdwb3J0LmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgSW5WaWV3cG9ydENvbXBvbmVudCB7XHJcblxyXG4gIG9uVmlld3BvcnRDaGFuZ2UoZXZlbnQpIHtcclxuICAgIGNvbnNvbGUubG9nKGV2ZW50KTtcclxuICB9XHJcbn1cclxuIl19
+/** @nocollapse */
+InViewportComponent.ctorParameters = () => [
+  {type: ChangeDetectorRef}
+];
+if (false) {
+  /**
+   * @type {?}
+   * @private
+   */
+  InViewportComponent.prototype.changeDetectorRef;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tdmlld3BvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYWl0cC11dGlscy8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2luLXZpZXdwb3J0L2luLXZpZXdwb3J0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLGlCQUFpQixFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQU0zRCxNQUFNLE9BQU8sbUJBQW1COzs7O0lBQzlCLFlBQW9CLGlCQUFvQztRQUFwQyxzQkFBaUIsR0FBakIsaUJBQWlCLENBQW1CO0lBQ3hELENBQUM7Ozs7O0lBR0QsZ0JBQWdCLENBQUMseUJBQW9EO1FBQ25FLElBQUkseUJBQXlCLENBQUMsY0FBYyxFQUFFO1lBQzVDLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLEVBQUUsQ0FBQztTQUNuQzthQUFNO1lBQ0wsSUFBSSxDQUFDLGlCQUFpQixDQUFDLE1BQU0sRUFBRSxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQzs7O1lBZkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxrQkFBa0I7Z0JBQzVCLHVIQUEyQzthQUM1Qzs7OztZQUxPLGlCQUFpQjs7Ozs7OztJQU9YLGdEQUE0QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FpdXQtaW4tdmlld3BvcnQnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi12aWV3cG9ydC5jb21wb25lbnQuaHRtbCdcclxufSlcclxuZXhwb3J0IGNsYXNzIEluVmlld3BvcnRDb21wb25lbnQge1xyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7XHJcbiAgfVxyXG5cclxuXHJcbiAgb25WaWV3cG9ydENoYW5nZShpbnRlcnNlY3Rpb25PYnNlcnZlckVudHJ5OiBJbnRlcnNlY3Rpb25PYnNlcnZlckVudHJ5KSB7XHJcbiAgICBpZiAoaW50ZXJzZWN0aW9uT2JzZXJ2ZXJFbnRyeS5pc0ludGVyc2VjdGluZykge1xyXG4gICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLnJlYXR0YWNoKCk7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLmNoYW5nZURldGVjdG9yUmVmLmRldGFjaCgpO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG4iXX0=

dist/esm5/lib/components/in-viewport/in-viewport.component.js

@@ -2,22 +2,27 @@
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-import {Component} from '@angular/core';
+import {ChangeDetectorRef, Component} from '@angular/core';
 
 var InViewportComponent = /** @class */ (function () {
-  function InViewportComponent() {
+  function InViewportComponent(changeDetectorRef) {
+    this.changeDetectorRef = changeDetectorRef;
   }
 
   /**
-   * @param {?} event
+   * @param {?} intersectionObserverEntry
    * @return {?}
    */
   InViewportComponent.prototype.onViewportChange = /**
-   * @param {?} event
+   * @param {?} intersectionObserverEntry
    * @return {?}
    */
-  function (event) {
-    console.log(event);
+  function (intersectionObserverEntry) {
+    if (intersectionObserverEntry.isIntersecting) {
+      this.changeDetectorRef.reattach();
+    } else {
+      this.changeDetectorRef.detach();
+    }
   };
   InViewportComponent.decorators = [
     {
@@ -27,7 +32,20 @@ var InViewportComponent = /** @class */ (function () {
       }]
     }
   ];
+  /** @nocollapse */
+  InViewportComponent.ctorParameters = function () {
+    return [
+      {type: ChangeDetectorRef}
+    ];
+  };
   return InViewportComponent;
 }());
 export {InViewportComponent};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tdmlld3BvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYWl0cC11dGlscy8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2luLXZpZXdwb3J0L2luLXZpZXdwb3J0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV4QztJQUFBO0lBU0EsQ0FBQzs7Ozs7SUFIQyw4Q0FBZ0I7Ozs7SUFBaEIsVUFBaUIsS0FBSztRQUNwQixPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JCLENBQUM7O2dCQVJGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsa0JBQWtCO29CQUM1Qix1SEFBMkM7aUJBQzVDOztJQU1ELDBCQUFDO0NBQUEsQUFURCxJQVNDO1NBTFksbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhaXV0LWluLXZpZXdwb3J0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaW4tdmlld3BvcnQuY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBJblZpZXdwb3J0Q29tcG9uZW50IHtcclxuXHJcbiAgb25WaWV3cG9ydENoYW5nZShldmVudCkge1xyXG4gICAgY29uc29sZS5sb2coZXZlbnQpO1xyXG4gIH1cclxufVxyXG4iXX0=
+if (false) {
+  /**
+   * @type {?}
+   * @private
+   */
+  InViewportComponent.prototype.changeDetectorRef;
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tdmlld3BvcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vYWl0cC11dGlscy8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2luLXZpZXdwb3J0L2luLXZpZXdwb3J0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFDLGlCQUFpQixFQUFFLFNBQVMsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUUzRDtJQUtFLDZCQUFvQixpQkFBb0M7UUFBcEMsc0JBQWlCLEdBQWpCLGlCQUFpQixDQUFtQjtJQUN4RCxDQUFDOzs7OztJQUdELDhDQUFnQjs7OztJQUFoQixVQUFpQix5QkFBb0Q7UUFDbkUsSUFBSSx5QkFBeUIsQ0FBQyxjQUFjLEVBQUU7WUFDNUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ25DO2FBQU07WUFDTCxJQUFJLENBQUMsaUJBQWlCLENBQUMsTUFBTSxFQUFFLENBQUM7U0FDakM7SUFDSCxDQUFDOztnQkFmRixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsdUhBQTJDO2lCQUM1Qzs7OztnQkFMTyxpQkFBaUI7O0lBa0J6QiwwQkFBQztDQUFBLEFBaEJELElBZ0JDO1NBWlksbUJBQW1COzs7Ozs7SUFDbEIsZ0RBQTRDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDaGFuZ2VEZXRlY3RvclJlZiwgQ29tcG9uZW50fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYWl1dC1pbi12aWV3cG9ydCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2luLXZpZXdwb3J0LmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgSW5WaWV3cG9ydENvbXBvbmVudCB7XHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBjaGFuZ2VEZXRlY3RvclJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcclxuICB9XHJcblxyXG5cclxuICBvblZpZXdwb3J0Q2hhbmdlKGludGVyc2VjdGlvbk9ic2VydmVyRW50cnk6IEludGVyc2VjdGlvbk9ic2VydmVyRW50cnkpIHtcclxuICAgIGlmIChpbnRlcnNlY3Rpb25PYnNlcnZlckVudHJ5LmlzSW50ZXJzZWN0aW5nKSB7XHJcbiAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYucmVhdHRhY2goKTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3JSZWYuZGV0YWNoKCk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==

dist/fesm2015/aitp-utils.js

 import {CommonModule, isPlatformBrowser} from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   Directive,
   ElementRef,
@@ -20,11 +21,22 @@ import {filter, finalize, take, takeUntil} from 'rxjs/operators';
  */
 class InViewportComponent {
   /**
-   * @param {?} event
+   * @param {?} changeDetectorRef
+   */
+  constructor(changeDetectorRef) {
+    this.changeDetectorRef = changeDetectorRef;
+  }
+
+  /**
+   * @param {?} intersectionObserverEntry
    * @return {?}
    */
-  onViewportChange(event) {
-    console.log(event);
+  onViewportChange(intersectionObserverEntry) {
+    if (intersectionObserverEntry.isIntersecting) {
+      this.changeDetectorRef.reattach();
+    } else {
+      this.changeDetectorRef.detach();
+    }
   }
 }
 InViewportComponent.decorators = [
@@ -35,6 +47,10 @@ InViewportComponent.decorators = [
     }]
   }
 ];
+/** @nocollapse */
+InViewportComponent.ctorParameters = () => [
+  {type: ChangeDetectorRef}
+];
 
 /**
  * @fileoverview added by tsickle

dist/fesm5/aitp-utils.js

 import {CommonModule, isPlatformBrowser} from '@angular/common';
 import {
+  ChangeDetectorRef,
   Component,
   Directive,
   ElementRef,
@@ -19,19 +20,24 @@ import {filter, finalize, take, takeUntil} from 'rxjs/operators';
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var InViewportComponent = /** @class */ (function () {
-  function InViewportComponent() {
+  function InViewportComponent(changeDetectorRef) {
+    this.changeDetectorRef = changeDetectorRef;
   }
 
   /**
-   * @param {?} event
+   * @param {?} intersectionObserverEntry
    * @return {?}
    */
   InViewportComponent.prototype.onViewportChange = /**
-   * @param {?} event
+   * @param {?} intersectionObserverEntry
    * @return {?}
    */
-  function (event) {
-    console.log(event);
+  function (intersectionObserverEntry) {
+    if (intersectionObserverEntry.isIntersecting) {
+      this.changeDetectorRef.reattach();
+    } else {
+      this.changeDetectorRef.detach();
+    }
   };
   InViewportComponent.decorators = [
     {
@@ -41,6 +47,12 @@ var InViewportComponent = /** @class */ (function () {
       }]
     }
   ];
+  /** @nocollapse */
+  InViewportComponent.ctorParameters = function () {
+    return [
+      {type: ChangeDetectorRef}
+    ];
+  };
   return InViewportComponent;
 }());
 

dist/lib/components/in-viewport/in-viewport.component.d.ts

+import {ChangeDetectorRef} from '@angular/core';
+
 export declare class InViewportComponent {
-  onViewportChange(event: any): void;
+  private changeDetectorRef;
+
+  constructor(changeDetectorRef: ChangeDetectorRef);
+
+  onViewportChange(intersectionObserverEntry: IntersectionObserverEntry): void;
 }

src/lib/components/in-viewport/in-viewport.component.ts

-import {Component} from '@angular/core';
+import {ChangeDetectorRef, Component} from '@angular/core';
 
 @Component({
   selector: 'aiut-in-viewport',
   templateUrl: './in-viewport.component.html'
 })
 export class InViewportComponent {
+  constructor(private changeDetectorRef: ChangeDetectorRef) {
+  }
+
 
-  onViewportChange(event) {
-    console.log(event);
+  onViewportChange(intersectionObserverEntry: IntersectionObserverEntry) {
+    if (intersectionObserverEntry.isIntersecting) {
+      this.changeDetectorRef.reattach();
+    } else {
+      this.changeDetectorRef.detach();
+    }
   }
 }