### File

`projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts`

### Description

An element that listens to viewport positioning and fires inView and notInview events

### example

    <ngui-in-view [options]="myOptions" (inView)="doA()" (notInview)="doB()">
       <img *ngIf src="https://picsum.photos/800/300?image=1>
    </ngui-in-view>

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `ngui-inview`
styles | `:host {display: block;}`
template |
    <ng-container *ngIf="isInview" [ngTemplateOutlet]="template">
    </ng-container>

### Index

###### Properties
isInview observer once80PctVisible template
###### Methods
defaultInviewHandler handleIntersect ngOnDestroy ngOnInit
###### Inputs
options
###### Outputs
inview notInview

### Constructor

`constructor(element: ElementRef, renderer: Renderer2, platformId: any)`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:47
Parameters :
Name | Type | Optional
element | `ElementRef` | no
renderer | `Renderer2` | no
platformId | `any` | no

### Inputs

`options` | IntersectionObserver options Type: `any` Default value: `{threshold: [.1, .2, .3, .4, .5, .6, .7, .8]}`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:39

### Outputs

`inview` | `$event` type: `EventEmitter<any>`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:40

`notInview` | `$event` type: `EventEmitter<any>`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:41

### Methods

defaultInviewHandler
`defaultInviewHandler(entry: )`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:85
default intersection handler, which sets blur dependes on intersection ratio this won't be invoked if user provides any (inview) event. e.g. (inview)="something()" Parameters :
Name | Optional
entry | no
Returns : `any`

handleIntersect
`handleIntersect(entries: )`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:69
fires (inview) and (notInview) events when this component is visible or not visible Parameters :
Name | Optional
entries | no
Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:64
stop IntersectionObserver Returns : `void`

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

### Properties

isInview
`isInview: ```
Default value : `false`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:45
indicates that this element is in viewport

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

once80PctVisible
`once80PctVisible: ```
Default value : `false`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:47
indicates that this element is 80% in viewport. Used by the default callback

template
`template: `TemplateRef<any>``
Type : `TemplateRef<any>`
Decorators : `ContentChild`
Defined in projects/ngui-common/src/lib/ngui-inview/src/ngui-inview.component.ts:37
reference

    import {
        Component,
        ContentChild,
        ElementRef,
        EventEmitter,
        Inject,
        Input,
        OnDestroy,
        OnInit,
        Output,
        PLATFORM_ID,
        Renderer2,
        TemplateRef
    } from '@angular/core';

    import {isPlatformBrowser} from '@angular/common';

    /**
     * An element that listens to viewport positioning and fires inView and notInview events
     * ### example
     * ```ts
     * <ngui-in-view [options]="myOptions" (inView)="doA()" (notInview)="doB()">
     *   <img *ngIf src="https://picsum.photos/800/300?image=1>
     * </ngui-in-view>
     * ```
     */
    @Component({
        selector: 'ngui-inview',
        template: `
            <ng-container *ngIf="isInview" [ngTemplateOutlet]="template">
            </ng-container>
        `,
        styles: [':host {display: block;}']
    })
    export class NguiInviewComponent implements OnInit, OnDestroy {
        /** <ng-template> reference */
        @ContentChild(TemplateRef) template: TemplateRef<any>;
        /** IntersectionObserver options */
        @Input() options: any = {threshold: [.1, .2, .3, .4, .5, .6, .7, .8]};
        @Output() inview: EventEmitter<any> = new EventEmitter();
        @Output() notInview: EventEmitter<any> = new EventEmitter();

        observer: IntersectionObserver;
        /** indicates that this element is in viewport */
        isInview = false;
        /** indicates that this element is 80% in viewport. Used by the default callback */
        once80PctVisible = false;

        constructor(
            private element: ElementRef,
            private 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);
            }
        }

        /** stop IntersectionObserver */
        ngOnDestroy(): void {
            this.observer.disconnect();
        }

        /** fires (inview) and (notInview) events when this component is visible or not visible  */
        handleIntersect(entries): void {
            entries.forEach((entry: IntersectionObserverEntry) => {
                if (entry['isIntersecting']) {
                    this.isInview = true;
                    this.defaultInviewHandler(entry);
                    this.inview.emit(entry);
                } else {
                    this.notInview.emit(entry);
                }
            });
        }

        /**
         * default intersection handler, which sets blur dependes on intersection ratio
         * this won't be invoked if user provides any (inview) event. e.g. (inview)="something()"
         */
        defaultInviewHandler(entry): any {
            if (this.once80PctVisible || this.inview.observers.length) {
                return;
            }

            if (entry.intersectionRatio < 0.8) {
                const opacity = entry.intersectionRatio * (1 / 0.8);
                const blur = 20 - Math.floor(entry.intersectionRatio * 10) * 4;
                const filter = `blur(${blur}px)`;
                Object.assign(entry.target.style, {opacity, filter});
            } else {
                entry.target.style.opacity = 1;
                entry.target.style.filter = 'unset';

                this.once80PctVisible = true;
            }
        }
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""