### File

`modules/list/src/ngui-virtual-list.component.ts`

### Description

Virtual List

The `<ngui-inview ..>` inserts into `<div #pages>` when it is in viewport When it's inserted, it will be pushed down, which makes it out of viewport. User scrolls down to see the bottom of the list, then it will insert another `<ngui-inview-page>` again.

listens to (nguiInview) and (nguiOutview) events, when is out of view port, it empties out the contents. and it restores back the contents when it is in viewport again.

### example

    <ngui-virtual-list (bottomInview)="loadItems($event)">
       <ng-template let-items="items">
         <div *ngIf="!items">Loading</div>
         <li *ngFor="let num of items; trackBy: num">row number: {{ num }}</li>
       </ng-template>
    </ngui-virtual-list>

### Implements

`AfterViewInit`

### Metadata

selector | `ngui-virtual-list`
styles | `:host {display: block}`
template |
    <div class="ngui-virtual-list"
      (focus)="_focused = true"
      (click)="_focused = true">
      <!-- hold multiple <ngui-inview-page> -->
      <div #pages></div>
      <!-- insert <ngui-inview-page> into #pages -->
      <ngui-inview (inview)="addAnInviewPageToPages()"></ngui-inview>
    </div>

### Index

###### Properties
_focused Public cdr Public dynamicComponentService Public element inviewPage inviewPages isListLoading pagesRef Public renderer template
###### Methods
addAnInviewPageToPages addList ngAfterViewInit
###### Outputs
bottomInview escaped selected

### Constructor

`constructor(renderer: Renderer2, element: ElementRef, dynamicComponentService: DynamicComponentService, cdr: ChangeDetectorRef)`
Defined in modules/list/src/ngui-virtual-list.component.ts:97
Parameters :
Name | Type | Optional
renderer | `Renderer2` | no
element | `ElementRef` | no
dynamicComponentService | `DynamicComponentService` | no
cdr | `ChangeDetectorRef` | no

### Outputs

`bottomInview` | Event fired when bottom of the virtual list is in view The handler of this event must call `$event.addItems(items: Array<any>)` to fill contents If not, only the first page is loaded, and rest of the pages won't be loaded; ### example
    <ngui-virtual-list (bottomInview)="loadItems($event)">
       <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 #noItems>Loading</ng-template>
       </ng-template>
    </ngui-virtual-list>
`$event` type: `EventEmitter<any>`
Defined in modules/list/src/ngui-virtual-list.component.ts:90

`escaped` | Fired when `ESC` key is pressed from `<ngui-list-item>` `$event` type: `EventEmitter<any>`
Defined in modules/list/src/ngui-virtual-list.component.ts:71

`selected` | Fired when child `<ngui-list-item>` is selected `$event` type: `EventEmitter<any>`
Defined in modules/list/src/ngui-virtual-list.component.ts:69

### Methods

addAnInviewPageToPages
`addAnInviewPageToPages()`
Defined in modules/list/src/ngui-virtual-list.component.ts:118
When the bottom is inview port, this function is called It will insert a dynamicall created NguiInviewPageComponent with the given template. It will also fires (bottomInview) event, so that user can fill up items for the page. Returns : `void`

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

ngAfterViewInit
`ngAfterViewInit()`
Defined in modules/list/src/ngui-virtual-list.component.ts:107
Check if necessary input and output is provided Returns : `void`

### Properties

_focused
`_focused: ```
Default value : `false`
Defined in modules/list/src/ngui-virtual-list.component.ts:94

Public cdr
`cdr: `ChangeDetectorRef``
Type : `ChangeDetectorRef`
Defined in modules/list/src/ngui-virtual-list.component.ts:103

Public dynamicComponentService
`dynamicComponentService: `DynamicComponentService``
Type : `DynamicComponentService`
Defined in modules/list/src/ngui-virtual-list.component.ts:102

Public element
`element: `ElementRef``
Type : `ElementRef`
Defined in modules/list/src/ngui-virtual-list.component.ts:101

inviewPage
`inviewPage: `ComponentRef<NguiInviewPageComponent>``
Type : `ComponentRef<NguiInviewPageComponent>`
Defined in modules/list/src/ngui-virtual-list.component.ts:93
The last NguiInviewPageComponent being inserted

inviewPages
`inviewPages: `Array<ComponentRef<NguiInviewPageComponent>>``
Type : `Array<ComponentRef<NguiInviewPageComponent>>`
Default value : `[]`
Defined in modules/list/src/ngui-virtual-list.component.ts:97

isListLoading
`isListLoading: `boolean``
Type : `boolean`
Defined in modules/list/src/ngui-virtual-list.component.ts:96
Indicates if a page is still loading

pagesRef
`pagesRef: `ViewContainerRef``
Type : `ViewContainerRef`
Decorators : `ViewChild`
Defined in modules/list/src/ngui-virtual-list.component.ts:65
the container NguiInviewPage will be inserted

Public renderer
`renderer: `Renderer2``
Type : `Renderer2`
Defined in modules/list/src/ngui-virtual-list.component.ts:100

template
`template: `TemplateRef<any>``
Type : `TemplateRef<any>`
Decorators : `ContentChild`
Defined in modules/list/src/ngui-virtual-list.component.ts:67
Template of NguiInviewPage. Allow users to define their own template

    import {
      AfterViewInit,
      ChangeDetectorRef,
      Component,
      ComponentRef,
      ContentChild,
      ElementRef,
      EventEmitter,
      Input,
      Output,
      Renderer2,
      TemplateRef,
      ViewChild,
      ViewContainerRef
    } from '@angular/core';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/debounceTime';
    import 'rxjs/add/observable/fromEvent';

    import { DynamicComponentService } from '../../utils';
    import { NguiInviewPageComponent } from './ngui-inview-page.component';

    /**
     * Virtual List
     *
     * The `<ngui-inview ..>` inserts <ngui-inview-page> into
     * `<div #pages>` when it is in viewport
     * When it's inserted, it will be pushed down, which makes it out of viewport.
     * User scrolls down to see the bottom of the list,
     * then it will insert another `<ngui-inview-page>` again.
     *
     * <ngui-inview-page> listens to (nguiInview) and (nguiOutview) events,
     * when <ngui-inview-page> is out of view port, it empties out the contents.
     * and it restores back the contents when it is in viewport again.
     *
     * ### example
     * ```ts
     * <ngui-virtual-list (bottomInview)="loadItems($event)">
     *   <ng-template let-items="items">
     *     <div *ngIf="!items">Loading</div>
     *     <li *ngFor="let num of items; trackBy: num">row number: {{ num }}</li>
     *   </ng-template>
     * </ngui-virtual-list>
     * ```
     */
    @Component({
      selector: 'ngui-virtual-list',
      template: `
        <div class="ngui-virtual-list"
          (focus)="_focused = true"
          (click)="_focused = true">
          <!-- hold multiple <ngui-inview-page> -->
          <div #pages></div>
          <!-- insert <ngui-inview-page> into #pages -->
          <ngui-inview (inview)="addAnInviewPageToPages()"></ngui-inview>
        </div>
      `,
      styles: [`
        :host {display: block}
      `]
    })
    export class NguiVirtualListComponent implements AfterViewInit {

      /** the container NguiInviewPage will be inserted */
      @ViewChild('pages', {read: ViewContainerRef}) pagesRef: ViewContainerRef;
      /** Template of NguiInviewPage. Allow users to define their own template  */
      @ContentChild(TemplateRef) template: TemplateRef<any>;
      /** Fired when child `<ngui-list-item>` is selected */
      @Output() selected: EventEmitter<any> = new EventEmitter();
      /** Fired when `ESC` key is pressed from `<ngui-list-item>` */
      @Output() escaped: EventEmitter<any> = new EventEmitter();

      /**
       * Event fired when bottom of the virtual list is in view
       * The handler of this event must call `$event.addItems(items: Array<any>)` to fill contents
       * If not, only the first page is loaded, and rest of the pages won't be loaded;
       *
       * ### example
       * ```ts
       * <ngui-virtual-list (bottomInview)="loadItems($event)">
       *   <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 #noItems>Loading</ng-template>
       *   </ng-template>
       * </ngui-virtual-list>
       * ```
       */
      @Output() bottomInview: EventEmitter<any> = new EventEmitter();

      /** The last NguiInviewPageComponent being inserted */
      inviewPage: ComponentRef<NguiInviewPageComponent>;
      _focused = false;
      /** Indicates if a page is still loading */
      isListLoading: boolean;
      inviewPages: Array<ComponentRef<NguiInviewPageComponent>> = [];

      constructor(
        public renderer: Renderer2,
        public element: ElementRef,
        public dynamicComponentService: DynamicComponentService,
        public cdr: ChangeDetectorRef
      ) {}

      /** Check if necessary input and output is provided */
      ngAfterViewInit(): void {
        if (!this.template || !this.bottomInview.observers.length) {
          console.error('<ngui-virtual-list> requires [template] and {bottomInview)');
        }
      }

      /**
       * When the bottom is inview port, this function is called
       * It will insert a dynamicall created NguiInviewPageComponent with the given template.
       * It will also fires (bottomInview) event, so that user can fill up items for the page.
       */
      addAnInviewPageToPages(): void {
        if (!this.isListLoading) {
          this.isListLoading = true;

          this.inviewPage =
            this.dynamicComponentService.createComponent(NguiInviewPageComponent, this.pagesRef);
          this.dynamicComponentService.insertComponent(this.inviewPage);

          this.inviewPage.instance.template = this.template;
          this.inviewPages.push(this.inviewPage);

          this.bottomInview.emit(this); // Fire evnet, so that user can load items
        } else {
          console.log('Already a page being inserted, skipping adding a page');
        }
      }

      // set items of NguiInviewPageComponent
      addList(items: Array<any>): void {
        this.isListLoading = false;
        console.log('>>>>>> NguiVirtualListComponent.addList() is called()');
        this.inviewPage.instance.setItems(items);
      }

    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""