### File

`modules/inview/src/ngui-inview.directive.ts`

### Description

Fires (nguiInview) or (nguiOutview) events dependents on the element is in viewport or not

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `[nguiInview], [nguiOutview]`

### Index

###### Properties
Public element observer Public renderer
###### Methods
handleIntersect ngOnDestroy ngOnInit
###### Inputs
options
###### Outputs
nguiInview nguiOutview

### Constructor

`constructor(element: ElementRef, renderer: Renderer2, platformId: any)`
Defined in modules/inview/src/ngui-inview.directive.ts:31
Parameters :
Name | Type | Optional
element | `ElementRef` | no
renderer | `Renderer2` | no
platformId | `any` | no

### Inputs

`options` | IntersectionObserver options Type: `any` Default value: `{}`
Defined in modules/inview/src/ngui-inview.directive.ts:26

### Outputs

`nguiInview` | Event that will be fired when in viewport `$event` type: `EventEmitter<any>`
Defined in modules/inview/src/ngui-inview.directive.ts:29

`nguiOutview` | Event that will be fired when out of viewport `$event` type: `EventEmitter<any>`
Defined in modules/inview/src/ngui-inview.directive.ts:31

### Methods

handleIntersect
`handleIntersect(entries: , observer: )`
Defined in modules/inview/src/ngui-inview.directive.ts:58
Fires (nguiInview) event when this element is in viewport and fires (nguiOutview) event when this element is not in viewport Parameters :
Name | Optional
entries | no
observer | no
Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Defined in modules/inview/src/ngui-inview.directive.ts:48
Stops IntersectionObserver Returns : `void`

ngOnInit
`ngOnInit()`
Defined in modules/inview/src/ngui-inview.directive.ts:40
Starts IntersectionObserver Returns : `void`

### Properties

Public element
`element: `ElementRef``
Type : `ElementRef`
Defined in modules/inview/src/ngui-inview.directive.ts:34

observer
`observer: `IntersectionObserver``
Type : `IntersectionObserver`
Defined in modules/inview/src/ngui-inview.directive.ts:23

Public renderer
`renderer: `Renderer2``
Type : `Renderer2`
Defined in modules/inview/src/ngui-inview.directive.ts:35

    import {
      Directive,
      ElementRef,
      EventEmitter,
      Inject,
      Input,
      OnDestroy,
      OnInit,
      Output,
      PLATFORM_ID,
      Renderer2,
      ViewChild
    } from '@angular/core';
    import { isPlatformBrowser } from '@angular/common';

    /**
     * Fires (nguiInview) or (nguiOutview) events dependents on the element is in viewport or not
     */
    @Directive({
      selector: '[nguiInview], [nguiOutview]' // tslint:disable-line
    })
    export class NguiInviewDirective implements OnInit, OnDestroy {
      observer: IntersectionObserver;

      /** IntersectionObserver options */
      @Input() options: any = {};

      /** Event that will be fired when in viewport */
      @Output() nguiInview: EventEmitter<any> = new EventEmitter();
      /** Event that will be fired when out of  viewport */
      @Output() nguiOutview: EventEmitter<any> = new EventEmitter();

      constructor(
        public element: ElementRef,
        public renderer: Renderer2,
        @Inject(PLATFORM_ID) private platformId: any) {
      }

      /** Starts IntersectionObserver */
      ngOnInit(): void {
        if (isPlatformBrowser(this.platformId)) {
          this.observer = new IntersectionObserver(this.handleIntersect.bind(this), this.options);
          this.observer.observe(this.element.nativeElement);
        }
      }

      /** Stops IntersectionObserver */
      ngOnDestroy(): void {
        if (isPlatformBrowser(this.platformId)) {
          this.observer && this.observer.disconnect();
        }
      }

      /**
       * Fires (nguiInview) event when this element is in viewport
       *  and fires (nguiOutview) event when this element is not in viewport
       */
      handleIntersect(entries, observer): void {
        entries.forEach((entry: IntersectionObserverEntry) => {
          if (entry['isIntersecting']) {
            this.nguiInview.emit(entry);
          } else {
            this.nguiOutview.emit(entry);
          }
        });
      }
    }

# results matching ""

# No results matching ""