### File

`projects/ngui-common/src/lib/ngui-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 projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:30
Parameters :
Name | Type | Optional
element | `ElementRef` | no
renderer | `Renderer2` | no
platformId | `any` | no

### Inputs

`options` | IntersectionObserver options Type: `any` Default value: `{}`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:25

### Outputs

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

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

### Methods

handleIntersect
`handleIntersect(entries: )`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:57
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
Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:47
Stops IntersectionObserver Returns : `void`

ngOnInit
`ngOnInit()`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:39
Starts IntersectionObserver Returns : `void`

### Properties

Public element
`element: `ElementRef``
Type : `ElementRef`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:33

observer
`observer: `IntersectionObserver``
Type : `IntersectionObserver`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:22

Public renderer
`renderer: `Renderer2``
Type : `Renderer2`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.directive.ts:34

    import {
        Directive,
        ElementRef,
        EventEmitter,
        Inject,
        Input,
        OnDestroy,
        OnInit,
        Output,
        PLATFORM_ID,
        Renderer2
    } 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): void {
            entries.forEach((entry: IntersectionObserverEntry) => {
                if (entry['isIntersecting']) {
                    this.nguiInview.emit(entry);
                } else {
                    this.nguiOutview.emit(entry);
                }
            });
        }
    }

# results matching ""

# No results matching ""