dhilt · dhilt · Apr 25, 2025 · Apr 4, 2025 · Apr 9, 2025 · Apr 9, 2025
diff --git a/README.md b/README.md
@@ -8,29 +8,16 @@ A directive for [Angular](https://angular.io/) framework to provide unlimited bi
 <p dir="rtl">
 <sub>can donate? go <b><a href="https://github.com/dhilt/ngx-ui-scroll?sponsor=1">here</a></b></sub><sub> 👉 <br>make open-source world better</sub></p>
 
-- [Compatibility](#compatibility)
 - [Motivation](#motivation)
 - [Features](#features)
 - [Getting](#getting)
 - [Usage](#usage)
 - [Settings](#settings)
 - [Adapter API](#adapter-api)
+- [Compatibility](#compatibility)
 - [Development](#development)
 <br>
 
-<a name="compatibility" id="compatibility"></a>
-### Compatibility
-
-The ngx-ui-scroll library has no breaking changes in its API, but there are inevitable changes in how it is built and distributed to the host app depending on the version of the Angular.
-
-|ngx-ui-scroll|Angular|compiled|support|notes|
-|:--|:--|:--|:--|:--|
-|v1|5-12|View Engine|no|no dependencies (vscroll is not extracted)|
-|v2|5-12|View Engine|maintenance|vscroll is a bundle-dependency|
-|v3|12+|Ivy|active|vscroll is a peer-dependency|
-
-So if the consumer app is view-engine compatible, you should use ngx-ui-scroll v2 which is in maintenance mode and under [v2-legacy](https://github.com/dhilt/ngx-ui-scroll/tree/v2-legacy) branch.
-
 ### Motivation
 
 Scrolling large datasets may cause performance issues. Many DOM elements, many data-bindings, many event listeners... The common way to improve the performance is to render only a small portion of the dataset visible to a user. Other dataset elements that are not visible to a user are virtualized with upward and downward empty padding elements which should provide a consistent viewport with consistent scrollbar parameters.
@@ -229,7 +216,7 @@ Below is the list of invocable methods of the Adapter API with description and l
 
 Along with the documented API there are some undocumented features that can be treated as experimental. They are not tested enough and might change over time. Some of them can be found on the [experimental tab](https://dhilt.github.io/ngx-ui-scroll/#experimental) of the demo app.
 
-All of the Adapter methods are asynchronous, because they work with DOM and may take time to complete. For this purpose the Adapter methods return a Promise resolving at the moment when the Scroller terminates its internal processes, which were triggered by the invocation of the correspondent Adapter method. This is called the [Adapter Return API](https://dhilt.github.io/ngx-ui-scroll/#adapter#return-value). This promise has exactly the same nature as the promise of the [Adapter.relax method](https://dhilt.github.io/ngx-ui-scroll/#experimental#adapter-relax). Both "Relax" and "Return API" are the instruments of the App-Scroller processes normalization. It might be quite important to run some logic after the Scroller finishes its job and relaxes. Below is an example of how an explicit sequence of the Adapter methods can be safely implemented:
+All Adapter methods are asynchronous because they interact with the DOM, which can be a time-consuming operation. Each Adapter method returns a Promise that resolves when the Scroller has terminated all internal processes triggered by that specific method call. This is called the [Adapter Return API](https://dhilt.github.io/ngx-ui-scroll/#adapter#return-value). The Promise returned by each Adapter method has exactly the same nature as the promise of the [Adapter.relax method](https://dhilt.github.io/ngx-ui-scroll/#experimental#adapter-relax). Both the "Relax" method and the "Return API" serve as tools for normalizing App-Scroller processes. In many cases, it is crucial to perform certain logic only after the Scroller has finished its work and entered a relaxed state. Below is an example of how to safely implement a sequence of Adapter method calls:
 
 ```js
 const { adapter } = this.datasource;
@@ -243,6 +230,20 @@ console.log('Two-phase replacement done');
 For more information, see [Adapter demo page](https://dhilt.github.io/ngx-ui-scroll/#adapter).
 
 
+### Compatibility
+
+The ngx-ui-scroll library has no breaking changes in its API, but there are inevitable changes in how it is built and distributed to the host app depending on the version of the Angular. This means that while your code using the library’s API remains compatible across versions, you may need to select the appropriate ngx-ui-scroll package version to match your Angular project’s build system and compatibility requirements.
+
+|ngx-ui-scroll|Angular|compiled|vscroll (core)|support
+|:--|:--|:--|:--|:--|
+|v1|5-12|View Engine|no dependencies (vscroll is not extracted)|no
+|v2|5-12|View Engine|vscroll is a bundle-dependency|maintenance
+|v3|12+|Ivy|vscroll is a peer-dependency|maintenance
+|v4|17+|Ivy|vscroll is a peer-dependency|active
+
+Note: Starting from v4, the @for block syntax is used instead of *ngFor.
+
+
 ### Development
 
 There are some npm scripts available from package.json:

diff --git a/demo/angular.json b/demo/angular.json
@@ -22,8 +22,13 @@
             "main": "main.ts",
             "polyfills": "polyfills.ts",
             "tsConfig": "tsconfig.json",
-            "assets": ["favicon.ico", "assets"],
-            "styles": ["styles.css"],
+            "assets": [
+              "favicon.ico",
+              "assets"
+            ],
+            "styles": [
+              "styles.css"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -64,10 +69,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "demo:build:production"
+              "buildTarget": "demo:build:production"
             },
             "development": {
-              "browserTarget": "demo:build:development"
+              "buildTarget": "demo:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -78,4 +83,4 @@
   "cli": {
     "analytics": false
   }
-}
+}
diff --git a/demo/app/app.component.ts b/demo/app/app.component.ts
@@ -10,7 +10,8 @@ import { filter } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  standalone: false
 })
 export class AppComponent implements AfterViewInit, OnDestroy {
   hasLayout = true;

diff --git a/demo/app/samples/adapter.component.ts b/demo/app/samples/adapter.component.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-samples-adapter',
-  templateUrl: './adapter.component.html'
+  templateUrl: './adapter.component.html',
+  standalone: false
 })
 export class AdapterComponent {
   constructor() {}

diff --git a/demo/app/samples/adapter/adapter-relax.component.ts b/demo/app/samples/adapter/adapter-relax.component.ts
@@ -7,7 +7,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-adapter-relax',
-  templateUrl: './adapter-relax.component.html'
+  templateUrl: './adapter-relax.component.html',
+  standalone: false
 })
 export class DemoAdapterRelaxComponent {
   demoContext = {

diff --git a/demo/app/samples/adapter/adapter-return-value.component.ts b/demo/app/samples/adapter/adapter-return-value.component.ts
@@ -4,7 +4,8 @@ import { demos } from '../../routes';
 
 @Component({
   selector: 'app-demo-adapter-return-value',
-  templateUrl: './adapter-return-value.component.html'
+  templateUrl: './adapter-return-value.component.html',
+  standalone: false
 })
 export class DemoAdapterReturnValueComponent {
   demoConfig = demos.adapterMethods.map.returnValue;

diff --git a/demo/app/samples/adapter/append-prepend-sync.component.ts b/demo/app/samples/adapter/append-prepend-sync.component.ts
@@ -13,7 +13,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-append-prepend-sync',
-  templateUrl: './append-prepend-sync.component.html'
+  templateUrl: './append-prepend-sync.component.html',
+  standalone: false
 })
 export class DemoAppendPrependSyncComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/append-prepend.component.ts b/demo/app/samples/adapter/append-prepend.component.ts
@@ -13,7 +13,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-append-prepend',
-  templateUrl: './append-prepend.component.html'
+  templateUrl: './append-prepend.component.html',
+  standalone: false
 })
 export class DemoAppendPrependComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/bof-eof.component.ts b/demo/app/samples/adapter/bof-eof.component.ts
@@ -14,7 +14,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-bof-eof',
-  templateUrl: './bof-eof.component.html'
+  templateUrl: './bof-eof.component.html',
+  standalone: false
 })
 export class DemoBofEofComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/buffer-info.component.ts b/demo/app/samples/adapter/buffer-info.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-buffer-info',
-  templateUrl: './buffer-info.component.html'
+  templateUrl: './buffer-info.component.html',
+  standalone: false
 })
 export class DemoBufferInfoComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/check-size.component.ts b/demo/app/samples/adapter/check-size.component.ts
@@ -13,7 +13,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-check-size',
-  templateUrl: './check-size.component.html'
+  templateUrl: './check-size.component.html',
+  standalone: false
 })
 export class DemoCheckSizeComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/clip.component.ts b/demo/app/samples/adapter/clip.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-clip',
-  templateUrl: './clip.component.html'
+  templateUrl: './clip.component.html',
+  standalone: false
 })
 export class DemoClipComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/first-last-visible-items.component.ts b/demo/app/samples/adapter/first-last-visible-items.component.ts
@@ -14,7 +14,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-first-last-visible-items',
-  templateUrl: './first-last-visible-items.component.html'
+  templateUrl: './first-last-visible-items.component.html',
+  standalone: false
 })
 export class DemoFirstLastVisibleItemsComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/init.component.ts b/demo/app/samples/adapter/init.component.ts
@@ -19,7 +19,8 @@ import { Datasource } from 'ngx-ui-scroll';
 @Component({
   selector: 'app-demo-init',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './init.component.html'
+  templateUrl: './init.component.html',
+  standalone: false
 })
 export class DemoInitComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/insert.component.ts b/demo/app/samples/adapter/insert.component.ts
@@ -7,7 +7,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-insert',
-  templateUrl: './insert.component.html'
+  templateUrl: './insert.component.html',
+  standalone: false
 })
 export class DemoInsertComponent {
   demoConfig = demos.adapterMethods.map.insert;

diff --git a/demo/app/samples/adapter/is-loading-extended.component.ts b/demo/app/samples/adapter/is-loading-extended.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-is-loading-advanced',
-  templateUrl: './is-loading-extended.component.html'
+  templateUrl: './is-loading-extended.component.html',
+  standalone: false
 })
 export class DemoIsLoadingExtendedComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/is-loading.component.ts b/demo/app/samples/adapter/is-loading.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-is-loading',
-  templateUrl: './is-loading.component.html'
+  templateUrl: './is-loading.component.html',
+  standalone: false
 })
 export class DemoIsLoadingComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/items-count.component.ts b/demo/app/samples/adapter/items-count.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-items-count',
-  templateUrl: './items-count.component.html'
+  templateUrl: './items-count.component.html',
+  standalone: false
 })
 export class DemoItemsCountComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/package-info.component.ts b/demo/app/samples/adapter/package-info.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-package-info',
-  templateUrl: './package-info.component.html'
+  templateUrl: './package-info.component.html',
+  standalone: false
 })
 export class DemoPackageInfoComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/pause-resume.component.ts b/demo/app/samples/adapter/pause-resume.component.ts
@@ -8,7 +8,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-pause-resume',
-  templateUrl: './pause-resume.component.html'
+  templateUrl: './pause-resume.component.html',
+  standalone: false
 })
 export class DemoPauseResumeComponent {
   demoContext = {

diff --git a/demo/app/samples/adapter/reload.component.ts b/demo/app/samples/adapter/reload.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-reload',
-  templateUrl: './reload.component.html'
+  templateUrl: './reload.component.html',
+  standalone: false
 })
 export class DemoReloadComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/remove.component.ts b/demo/app/samples/adapter/remove.component.ts
@@ -13,7 +13,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-remove',
-  templateUrl: './remove.component.html'
+  templateUrl: './remove.component.html',
+  standalone: false
 })
 export class DemoRemoveComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/replace.component.ts b/demo/app/samples/adapter/replace.component.ts
@@ -16,7 +16,8 @@ interface MyItem {
 
 @Component({
   selector: 'app-demo-replace',
-  templateUrl: './replace.component.html'
+  templateUrl: './replace.component.html',
+  standalone: false
 })
 export class DemoReplaceComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/reset.component.ts b/demo/app/samples/adapter/reset.component.ts
@@ -12,7 +12,8 @@ import { Datasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-reset',
-  templateUrl: './reset.component.html'
+  templateUrl: './reset.component.html',
+  standalone: false
 })
 export class DemoResetComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/adapter/update.component.ts b/demo/app/samples/adapter/update.component.ts
@@ -16,7 +16,8 @@ interface MyItem {
 
 @Component({
   selector: 'app-demo-update',
-  templateUrl: './update.component.html'
+  templateUrl: './update.component.html',
+  standalone: false
 })
 export class DemoUpdateComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/common/basic.component.ts b/demo/app/samples/common/basic.component.ts
@@ -12,7 +12,8 @@ import { IDatasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-basic',
-  templateUrl: './basic.component.html'
+  templateUrl: './basic.component.html',
+  standalone: false
 })
 export class DemoBasicComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/common/buffer-size.component.ts b/demo/app/samples/common/buffer-size.component.ts
@@ -12,7 +12,8 @@ import { IDatasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-buffer-size',
-  templateUrl: './buffer-size.component.html'
+  templateUrl: './buffer-size.component.html',
+  standalone: false
 })
 export class DemoBufferSizeComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/common/different-heights.component.ts b/demo/app/samples/common/different-heights.component.ts
@@ -14,7 +14,8 @@ interface MyItem {
 
 @Component({
   selector: 'app-demo-different-heights',
-  templateUrl: './different-heights.component.html'
+  templateUrl: './different-heights.component.html',
+  standalone: false
 })
 export class DemoDifferentHeightsComponent {
   settingsScope = demos.settings.map;

diff --git a/demo/app/samples/common/horizontal.component.ts b/demo/app/samples/common/horizontal.component.ts
@@ -12,7 +12,8 @@ import { IDatasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-horizontal',
-  templateUrl: './horizontal.component.html'
+  templateUrl: './horizontal.component.html',
+  standalone: false
 })
 export class DemoHorizontalComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/common/infinite.component.ts b/demo/app/samples/common/infinite.component.ts
@@ -12,7 +12,8 @@ import { IDatasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-infinite',
-  templateUrl: './infinite.component.html'
+  templateUrl: './infinite.component.html',
+  standalone: false
 })
 export class DemoInfiniteComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/common/item-size.component.ts b/demo/app/samples/common/item-size.component.ts
@@ -12,7 +12,8 @@ import { IDatasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-item-size',
-  templateUrl: './item-size.component.html'
+  templateUrl: './item-size.component.html',
+  standalone: false
 })
 export class DemoItemSizeComponent {
   demoContext: DemoContext = {

diff --git a/demo/app/samples/common/min-max-indexes.component.ts b/demo/app/samples/common/min-max-indexes.component.ts
@@ -12,7 +12,8 @@ import { IDatasource } from 'ngx-ui-scroll';
 
 @Component({
   selector: 'app-demo-min-max-indexes',
-  templateUrl: './min-max-indexes.component.html'
+  templateUrl: './min-max-indexes.component.html',
+  standalone: false
 })
 export class DemoMinMaxIndexesComponent {
   demoContext: DemoContext = {