### File

`modules/list/src/ngui-inview-page.component.ts`

### Description

A block of component that listens to inView and outView events, so that it empties contents when out of view after backup items and restores the contents when in view

### example

    <ngui-inview-page [items]="items">
       <ng-template let-items="items">
         <div *ngIf="items else noItems">
           <li *ngFor="let num of items; trackBy: num">row number: {{ num }}</li>
         </div>
       </ng-template>
    </ngui-inview-page>

### Implements

`OnInit` `OnDestroy`

### Metadata

selector | `ngui-inview-page`
styles | `:host {display: block}`
template |
    <div class="inview-page contents"
      (nguiInview)="restoreItems()"
      (nguiOutview)="emptyItems()">
      <!-- add blank ngui-list-item by condition  -->
      <!-- no match found ngui-list-item by condition -->
      <ng-container
        [ngTemplateOutlet]="template||defaultTemplate"
        [ngTemplateOutletContext]="{items: items, outView: outView}">
      </ng-container>
      <div *ngIf="outView">{{ this.itemsBackup.length }} items hidden</div>
    </div>

    <ng-template #defaultTemplate>
      <div *ngIf="!items"> Error: requires [items] </div>
      <div *ngIf="!template"> Error: requires &lt;ng-template></div>
    </ng-template>

### Index

###### Properties
contentsEl destroyed itemsBackup options outView template
###### Methods
emptyItems ngOnDestroy ngOnInit restoreItems setItems
###### Inputs
items

### Constructor

`constructor(element: ElementRef, renderer: Renderer2, cdRef: ChangeDetectorRef)`
Defined in modules/list/src/ngui-inview-page.component.ts:73
Parameters :
Name | Type | Optional
element | `ElementRef` | no
renderer | `Renderer2` | no
cdRef | `ChangeDetectorRef` | no

### Inputs

`items` | List of elements that are used to render this element Type: `Array<any>`
Defined in modules/list/src/ngui-inview-page.component.ts:60

### Methods

emptyItems
`emptyItems()`
Defined in modules/list/src/ngui-inview-page.component.ts:107
Empty items when not in viewport, so that elements are not rendered Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Defined in modules/list/src/ngui-inview-page.component.ts:99
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in modules/list/src/ngui-inview-page.component.ts:94
Returns : `void`

restoreItems
`restoreItems()`
Defined in modules/list/src/ngui-inview-page.component.ts:84
Restore items when in viewport, so that elements are rendered Returns : `void`

setItems
`setItems(items: Array)`
Defined in modules/list/src/ngui-inview-page.component.ts:122
Parameters :
Name | Type | Optional
items | `Array<any>` | no
Returns : `void`

### Properties

contentsEl
`contentsEl: `HTMLElement``
Type : `HTMLElement`
Defined in modules/list/src/ngui-inview-page.component.ts:72
The first element of this component. The height of it remains the same even when items get empty out.

destroyed
`destroyed: `boolean``
Type : `boolean`
Defined in modules/list/src/ngui-inview-page.component.ts:73

itemsBackup
`itemsBackup: `Array<any>``
Type : `Array<any>`
Default value : `[]`
Defined in modules/list/src/ngui-inview-page.component.ts:67
The copy of items. This is set when this element is out of viewport

options
`options: `any``
Type : `any`
Defined in modules/list/src/ngui-inview-page.component.ts:63
IntersectionObserver options

outView
`outView: ```
Default value : `false`
Defined in modules/list/src/ngui-inview-page.component.ts:65
Indicates that the page of out of viewport

template
`template: `TemplateRef<any>``
Type : `TemplateRef<any>`
Decorators : `ContentChild`
Defined in modules/list/src/ngui-inview-page.component.ts:56
Allow users to change the contents

    import {
      ChangeDetectorRef,
      Component,
      ContentChild,
      ElementRef,
      Input,
      OnDestroy,
      OnInit,
      Renderer2,
      TemplateRef
    } from '@angular/core';

    /**
     * A block of component that listens to inView and outView events,
     * so that it empties contents when out of view after backup items
     * and restores the contents when in view
     *
     * ### example
     * ```ts
     * <ngui-inview-page [items]="items">
     *   <ng-template let-items="items">
     *     <div *ngIf="items else noItems">
     *       <li *ngFor="let num of items; trackBy: num">row number: {{ num }}</li>
     *     </div>
     *   </ng-template>
     * </ngui-inview-page>
     * ```
     */
    @Component({
      selector: 'ngui-inview-page',
      template: `
        <div class="inview-page contents"
          (nguiInview)="restoreItems()"
          (nguiOutview)="emptyItems()">
          <!-- add blank ngui-list-item by condition  -->
          <!-- no match found ngui-list-item by condition -->
          <ng-container
            [ngTemplateOutlet]="template||defaultTemplate"
            [ngTemplateOutletContext]="{items: items, outView: outView}">
          </ng-container>
          <div *ngIf="outView">{{ this.itemsBackup.length }} items hidden</div>
        </div>

        <ng-template #defaultTemplate>
          <div *ngIf="!items"> Error: requires [items] </div>
          <div *ngIf="!template"> Error: requires &lt;ng-template></div>
        </ng-template>
      `,
      styles: [`
        :host {display: block}
      `]
    })
    export class NguiInviewPageComponent implements OnInit, OnDestroy {

      /** Allow users to change the contents */
      @ContentChild(TemplateRef) template: TemplateRef<any>;
      // @Input('template') template: TemplateRef<any>;

      /** List of elements that are used to render this element */
      @Input('items') items: Array<any>;

      /** IntersectionObserver options */
      options: any;
      /** Indicates that the page of out of viewport */
      outView = false;
      /** The copy of items. This is set when this element is out of viewport */
      itemsBackup: Array<any> = [];
      /**
       * The first element of this component.
       * The height of it remains the same even when items get empty out.
       */
      contentsEl: HTMLElement;
      destroyed: boolean;

      constructor(
        private element: ElementRef,
        private renderer: Renderer2,
        private cdRef: ChangeDetectorRef
      ) { }

      /**
       * Restore items when in viewport, so that elements are rendered
       */
      restoreItems(): void {
        if (this.outView) {
          this.outView = false;
          this.items = Array.from(this.itemsBackup || []);
          this.itemsBackup = undefined;
          this.renderer.setStyle(this.contentsEl, 'height', undefined);
          this.cdRef.detectChanges();
        }
      }

      ngOnInit(): void {
        this.contentsEl =
          this.element.nativeElement.querySelector('.inview-page.contents');
      }

      ngOnDestroy(): void {
        console.log('NguiInviewPageComponent.ngOnDestroy() is called');
        this.destroyed = true;
      }

      /**
       * Empty items when not in viewport, so that elements are not rendered
       */
      emptyItems(): void {
        if (this.items && this.contentsEl && !this.outView) {
          // set height before emptying contents
          const height = this.element.nativeElement.getBoundingClientRect().height;
          this.renderer.setStyle(this.contentsEl, 'height', `${height}px`);

          this.outView = true;
          this.itemsBackup = Array.from(this.items || []);
          this.items = undefined;
          if (!this.destroyed) {
            this.cdRef.detectChanges();
          }
        }
      }

      setItems(items: Array<any>): void {
        if (!this.destroyed) {
          console.log('NguiInviewPageComponent.setItems() is called with', items);
          this.items = items;
          this.cdRef.detectChanges();
        }
      }

    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""