angular2-virtual-scroll - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

CHANGELOG.md

 
+# v0.1.8
+
+* fixes [#74](https://github.com/rintoj/angular2-virtual-scroll/issues/74)
+* fix buffer for scroll to top amount [#71](https://github.com/rintoj/angular2-virtual-scroll/issues/71)
+
 # v0.1.7
@@ -3,0 +8,0 @@

dist/virtual-scroll.d.ts

@@ -1,5 +0,2 @@
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/observable/of';
-import { ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, Renderer, SimpleChanges } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
+import { ElementRef, EventEmitter, OnChanges, OnInit, Renderer, SimpleChanges } from '@angular/core';
 export interface ChangeEvent {
@@ -9,3 +6,3 @@ start?: number;
 }
-export declare class VirtualScrollComponent implements OnInit, OnDestroy, OnChanges {
+export declare class VirtualScrollComponent implements OnInit, OnChanges {
     private element;
@@ -18,2 +15,3 @@ private renderer;
     childHeight: number;
+    bufferAmount: number;
     update: EventEmitter<any[]>;
@@ -24,4 +22,2 @@ change: EventEmitter<ChangeEvent>;
     contentElementRef: ElementRef;
-    scroll$: Subject<Event>;
-    onScrollListener: Function;
     topPadding: number;
@@ -36,3 +32,2 @@ scrollHeight: number;
     ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
     refresh(): void;
@@ -39,0 +34,0 @@ scrollInto(item: any): void;

dist/virtual-scroll.js

@@ -11,8 +11,4 @@ "use strict";
 };
-require("rxjs/add/operator/switchMap");
-require("rxjs/add/observable/of");
 var core_1 = require("@angular/core");
 var common_1 = require("@angular/common");
-var Observable_1 = require("rxjs/Observable");
-var Subject_1 = require("rxjs/Subject");
 var VirtualScrollComponent = (function () {
@@ -23,2 +19,3 @@ function VirtualScrollComponent(element, renderer) {
         this.items = [];
+        this.bufferAmount = 0;
         this.update = new core_1.EventEmitter();
@@ -28,14 +25,8 @@ this.change = new core_1.EventEmitter();
         this.end = new core_1.EventEmitter();
-        this.scroll$ = new Subject_1.Subject();
         this.startupLoop = true;
     }
     VirtualScrollComponent.prototype.onScroll = function (e) {
-        this.scroll$.next();
+        this.refresh();
     };
     VirtualScrollComponent.prototype.ngOnInit = function () {
-        var _this = this;
-        this.scroll$.switchMap(function () {
-            _this.refresh();
-            return Observable_1.Observable.of();
-        }).subscribe();
         this.scrollbarWidth = 0; // this.element.nativeElement.offsetWidth - this.element.nativeElement.clientWidth;
@@ -48,3 +39,3 @@ this.scrollbarHeight = 0; // this.element.nativeElement.offsetHeight - this.element.nativeElement.clientHeight;
         var items = changes.items || {};
-        if (changes.items != undefined && items.previousValue == undefined || items.previousValue.length === 0) {
+        if (changes.items != undefined && items.previousValue == undefined || (items.previousValue != undefined && items.previousValue.length === 0)) {
             this.startupLoop = true;
@@ -54,11 +45,2 @@ }
     };
-    VirtualScrollComponent.prototype.ngOnDestroy = function () {
-        // Check that listener has been attached properly:
-        // It may be undefined in some cases, e.g. if an exception is thrown, the component is
-        // not initialized properly but destroy may be called anyways (e.g. in testing).
-        if (this.onScrollListener !== undefined) {
-            // this removes the listener
-            this.onScrollListener();
-        }
-    };
     VirtualScrollComponent.prototype.refresh = function () {
@@ -73,4 +55,4 @@ var _this = this;
         var d = this.calculateDimensions();
-        this.element.nativeElement.scrollTop = Math.floor(index / d.itemsPerRow) *
-            d.childHeight - Math.max(0, (d.itemsPerCol - 1)) * d.childHeight;
+        this.element.nativeElement.scrollTop = (Math.floor(index / d.itemsPerRow) * d.childHeight)
+            - (d.childHeight * Math.min(index, this.bufferAmount));
         this.refresh();
@@ -141,5 +123,10 @@ };
         var start = Math.min(maxStart, Math.floor(indexByScrollTop) * d.itemsPerRow);
-        this.topPadding = d.childHeight * Math.ceil(start / d.itemsPerRow);
+        this.topPadding = d.childHeight * Math.ceil(start / d.itemsPerRow) - (d.childHeight * Math.min(start, this.bufferAmount));
+        ;
         start = !isNaN(start) ? start : -1;
         end = !isNaN(end) ? end : -1;
+        start -= this.bufferAmount;
+        start = Math.max(0, start);
+        end += this.bufferAmount;
+        end = Math.min(items.length, end);
         if (start !== this.previousStart || end !== this.previousEnd) {
@@ -193,2 +180,6 @@ // update the scroll list
 __decorate([
+    core_1.Input(),
+    __metadata("design:type", Number)
+], VirtualScrollComponent.prototype, "bufferAmount", void 0);
+__decorate([
     core_1.Output(),
@@ -223,3 +214,3 @@ __metadata("design:type", core_1.EventEmitter)
         exportAs: 'virtualScroll',
-        template: "\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ",
+        template: "\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ",
         styles: ["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]
@@ -226,0 +217,0 @@ }),

dist/virtual-scroll.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}}]
+[{"__symbolic":"module","version":3,"metadata":{"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"VirtualScrollComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"virtual-scroll,[virtualScroll]","exportAs":"virtualScroll","template":"\n    <div class=\"total-padding\" [style.height]=\"scrollHeight + 'px'\"></div>\n    <div class=\"scrollable-content\" #content [style.transform]=\"'translateY(' + topPadding + 'px)'\"\n     [style.webkitTransform]=\"'translateY(' + topPadding + 'px)'\">\n      <ng-content></ng-content>\n    </div>\n  ","styles":["\n    :host {\n      overflow: hidden;\n      overflow-y: auto;\n      position: relative;\n      -webkit-overflow-scrolling: touch;\n    }\n    .scrollable-content {\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n    }\n    .total-padding {\n      width: 1px;\n      opacity: 0;\n    }\n  "]}]}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"scrollbarHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"childHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"bufferAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"start":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"end":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"contentElementRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["content",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"}]}],"onScroll":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["scroll"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"scrollInto":[{"__symbolic":"method"}],"countItemsPerRow":[{"__symbolic":"method"}],"calculateDimensions":[{"__symbolic":"method"}],"calculateItems":[{"__symbolic":"method"}]}},"VirtualScrollModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"VirtualScrollComponent"}],"declarations":[{"__symbolic":"reference","name":"VirtualScrollComponent"}]}]}]}}}]

package.json

 {
   "name": "angular2-virtual-scroll",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Angular 2 module for virtual -infinite- list. Supports multi-column",
@@ -5,0 +5,0 @@ "main": "dist/virtual-scroll.js",

README.md

@@ -133,2 +133,3 @@
 | childHeight    | number | The minimum height of the item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. Note that the actual rendered size of the first cell is used by default if not specified.
+| bufferAmount   | number | The the number of elements to be rendered outside of the current container's viewport. Useful when not all elements are the same dimensions.
 | update         | Event  | This event is fired every time `start` or `end` index change and emits list of items from `start` to `end`. The list emitted by this event must be used with `*ngFor` to render the actual list of items within `<virtual-scroll>`
@@ -229,2 +230,32 @@ | change         | Event  | This event is fired every time `start` or `end` index change and emits `ChangeEvent` which of format: `{ start: number, end: number }`
 
+## Focus on an item
+
+You could use `scrollInto(item)` api to scroll into an item in the list. See below:
+
+```ts
+import { Component, ViewChild } from '@angular/core';
+import { VirtualScrollComponent } from 'angular2-virtual-scroll';
+
+@Component({
+    selector: 'rj-list',
+    template: `
+        <virtual-scroll [items]="items" (update)="scrollList = $event">
+            <div *ngFor="let item of scrollList; let i = index"> {{i}}: {{item}} </div>
+        </virtual-scroll>
+    `
+})
+export class ListComponent {
+
+    protected items = ['Item1', 'Item2', 'Item3'];
+
+    @ViewChild(VirtualScrollComponent)
+    private virtualScroll: VirtualScrollComponent;
+
+    // call this function whenever you have to focus on second item
+    focusOnAnItem() {
+        this.virtualScroll.scrollInto(items[1]);
+    }
+}
+```
+
 ## Sorting Items
@@ -231,0 +262,0 @@

No alert changes

Improved metrics

Total package byte prevSize

42287

increased by2.32%

Number of lines in readme file

314

increased by10.95%

Worsened metrics

Lines of code

261

decreased by-4.74%

No dependency changes