Update

Update

CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 16.0.0-beta.2
+
+- feat: `scrollViewport` directive can be a descent child, not necessarily a direct child of `<ng-scrollbar externalViewport>`.
+- feat: Add `start`, `end`, `right`, `bottom` and `center` options to `scrollToElement` (supports RTL), closes [#637](https://github.com/MurhafSousli/ngx-scrollbar/issues/637).
+- feat: Add `syncSpacer` directive that is applied on `<ng-scrollbar externalViewport>` component to sync spacer element with content dimension changes.
+- fix: `ResizeObserver` loop completed with undelivered notifications, closes [#650](https://github.com/MurhafSousli/ngx-scrollbar/issues/650).
+- enhance: Improve scrollbar rendering speed that uses `externalViewport` such as integrating with 3rd party library.
+- enhance: Use the shared resize observer from the CDK to do the necessary calculation.
+- enhance: `asyncDetection` Use the content observer service from the CDK to detect viewport and content wrapper elements.
+- enhance: use `--scrollbar-thumb-hover-color` not only when hovered but also when active.
+- enhance: `track` and `thumb` controls uses more accurate measures using `getBoundingClientRect` instead of direct size properties.
+- refactor: Switch to `InputSignal` instead of standards inputs across components.
+- refactor: Use effects instead of `ngOnInit` to initialize the scrollbar component. 
+- refactor: Remove `scrollViewport` directive from `ng-scrollbar` hostDirectives because it's redundant.
+- refactor: the `TrackAdapter` now uses viewport & content dimension signals to update the track size instead of `ResizeObserver` events. 
+
+### Breaking changes
+
+- Minimum compatibility is Angular v17.3.0
+
 ## 15.1.3
 
 - enhance: Use injection factory for `NG_SCROLLBAR_OPTIONS` and `NG_SCROLLBAR_POLYFILL` to avoid merging custom options with the default options for every scrollbar component.

package.json

@@ -14,47 +14,47 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.1",
-    "@angular/cdk": "^18.2.1",
-    "@angular/common": "^18.2.1",
-    "@angular/compiler": "^18.2.1",
-    "@angular/core": "^18.2.1",
-    "@angular/forms": "^18.2.1",
-    "@angular/material": "^18.2.1",
-    "@angular/platform-browser": "^18.2.1",
-    "@angular/platform-browser-dynamic": "^18.2.1",
-    "@angular/platform-server": "^18.2.1",
-    "@angular/router": "^18.2.1",
-    "@angular/ssr": "^18.2.1",
+    "@angular/animations": "^18.2.5",
+    "@angular/cdk": "^18.2.5",
+    "@angular/common": "^18.2.5",
+    "@angular/compiler": "^18.2.5",
+    "@angular/core": "^18.2.5",
+    "@angular/forms": "^18.2.5",
+    "@angular/material": "^18.2.5",
+    "@angular/platform-browser": "^18.2.5",
+    "@angular/platform-browser-dynamic": "^18.2.5",
+    "@angular/platform-server": "^18.2.5",
+    "@angular/router": "^18.2.5",
+    "@angular/ssr": "^18.2.5",
     "@swimlane/ngx-datatable": "^20.1.0",
-    "ag-grid-angular": "^32.1.0",
-    "ag-grid-community": "^32.1.0",
+    "ag-grid-angular": "^32.2.0",
+    "ag-grid-community": "^32.2.0",
     "chance": "^1.1.12",
-    "express": "^4.18.2",
     "ng-zorro-antd": "^18.1.1",
     "ngx-color-picker": "^17.0.0",
     "ngx-infinite-scroll": "^18.0.0",
-    "primeng": "^17.18.9",
+    "primeng": "^17.18.10",
     "rxjs": "~7.8.0",
     "tslib": "^2.7.0",
     "zone.js": "^0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.1",
-    "@angular-eslint/builder": "18.3.0",
-    "@angular-eslint/eslint-plugin": "18.3.0",
-    "@angular-eslint/eslint-plugin-template": "18.3.0",
-    "@angular-eslint/schematics": "18.3.0",
-    "@angular-eslint/template-parser": "18.3.0",
-    "@angular/cli": "^18.2.1",
-    "@angular/compiler-cli": "^18.2.1",
+    "@angular-devkit/build-angular": "^18.2.5",
+    "@angular-eslint/builder": "18.3.1",
+    "@angular-eslint/eslint-plugin": "18.3.1",
+    "@angular-eslint/eslint-plugin-template": "18.3.1",
+    "@angular-eslint/schematics": "18.3.1",
+    "@angular-eslint/template-parser": "18.3.1",
+    "@angular/cli": "^18.2.5",
+    "@angular/compiler-cli": "^18.2.5",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^22.5.0",
-    "@typescript-eslint/eslint-plugin": "^8.0.0",
-    "@typescript-eslint/parser": "^8.0.0",
-    "eslint": "^9.8.0",
-    "jasmine-core": "^5.2.0",
+    "@types/node": "^22.6.1",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "eslint": "^9.11.1",
+    "express": "^4.21.0",
+    "jasmine-core": "^5.3.0",
     "karma": "~6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",

projects/ngx-scrollbar-demo/src/app/app.config.ts

@@ -1,10 +1,10 @@
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter, withHashLocation } from '@angular/router';
 import { provideClientHydration } from '@angular/platform-browser';
-import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS } from '@angular/material/button-toggle';
 import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -17,6 +17,6 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes, withHashLocation()),
     provideClientHydration(),
     provideHttpClient(withFetch()),
-    provideAnimations()
+    provideAnimationsAsync()
   ]
 };

projects/ngx-scrollbar-demo/src/app/example-ag-grid-table/example-ag-grid-table.component.html

@@ -1,6 +1,5 @@
 <ng-scrollbar externalViewport=".ag-center-cols-viewport"
-              externalContentWrapper=".ag-center-cols-container"
-              asyncDetection>
+              externalContentWrapper=".ag-center-cols-container">
   <ag-grid-angular
     style="height: 300px;"
     class="ag-theme-quartz"

projects/ngx-scrollbar-demo/src/app/example-infinite-scroll/example-infinite-scroll.component.html

@@ -18,9 +18,9 @@
              (scrolled)="onScrollDown($event)"
              (scrolledUp)="onUp($event)">
           <mat-list>
-            <mat-list-item class="example-item" *ngFor="let i of array">
-              {{ i }}
-            </mat-list-item>
+            @for (i of array; track i) {
+              <mat-list-item class="example-item">{{ i }}</mat-list-item>
+            }
           </mat-list>
         </div>
       </ng-scrollbar>

projects/ngx-scrollbar-demo/src/app/example-infinite-scroll/example-infinite-scroll.component.ts

@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatListModule } from '@angular/material/list';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import { MatCardModule } from '@angular/material/card';
 import { NgScrollbarModule } from 'ngx-scrollbar';
 import { Chance } from 'chance';
@@ -15,7 +15,7 @@ import { Chance } from 'chance';
     '[class.example-component]': 'true'
   },
   standalone: true,
-  imports: [MatCardModule, NgScrollbarModule, InfiniteScrollModule, MatListModule, CommonModule]
+  imports: [MatCardModule, NgScrollbarModule, MatListModule, CommonModule, InfiniteScrollDirective]
 })
 export class ExampleInfiniteScrollComponent {
   chance = new Chance();

projects/ngx-scrollbar-demo/src/app/example-mat-select/example-mat-select.component.ts

@@ -13,7 +13,6 @@ import { Chance } from 'chance';
   imports: [
     MatOptionModule,
     MatSelectModule,
-    NgForOf,
     NgScrollbar,
     MatCardModule,
     NgScrollbarMatSelectViewport

projects/ngx-scrollbar-demo/src/app/example-nested-virtual-scroll/example-nested-virtual-scroll.component.html

@@ -11,6 +11,8 @@
                   disableSensor
                   class="outer-ng-scrollbar">
       <cdk-virtual-scroll-viewport itemSize="120"
+                                   minBufferPx="480"
+                                   maxBufferPx="960"
                                    class="example-viewport">
 
         <div class="horizontal-scrollable-item" *cdkVirtualFor="let itemY of items">

projects/ngx-scrollbar-demo/src/app/example-ngx-datatable/example-ngx-datatable.component.html

@@ -1,8 +1,7 @@
 <mat-card class="example mat-elevation-z16">
   <div class="example-ngx-datatable">
     <ng-scrollbar externalViewport="datatable-body"
-                  externalContentWrapper="datatable-selection"
-                  asyncDetection>
+                  externalContentWrapper="datatable-selection">
       <ngx-datatable class="material"
                      style="height: 400px"
                      [rows]="rows()"

projects/ngx-scrollbar-demo/src/app/example-virutal-scroll/example-virtual-scroll.component.html

@@ -9,13 +9,14 @@
       <ng-scrollbar externalViewport
                     cdkVirtualScrollViewport
                     style="height: 100%"
-                    appearance="compact">
+                    appearance="compact"
+                    disableSensor>
         <cdk-virtual-scroll-viewport itemSize="50"
                                      minBufferPx="100"
                                      maxBufferPx="200">
           <mat-list>
             <mat-list-item class="example-item" *cdkVirtualFor="let item of items">
-              {{item}}
+              {{ item }}
             </mat-list-item>
           </mat-list>
         </cdk-virtual-scroll-viewport>

projects/ngx-scrollbar-demo/src/app/example2/example2.component.html

@@ -11,9 +11,9 @@
           <div scrollViewport>
             <ul>
               <li></li>
-              <li *ngFor="let item of list"
-                  [class.not]="!item.completed"
-                  [class.ok]="item.completed">{{item.title}}</li>
+              @for (item of list; track item.title) {
+                <li [class.not]="!item.completed" [class.ok]="item.completed">{{ item.title }}</li>
+              }
               <li></li>
             </ul>
           </div>

projects/ngx-scrollbar-demo/src/app/integration-page/integration-page.component.html

@@ -3,7 +3,7 @@ <h2 class="mat-typography">Ngx-datatable Example</h2>
 
   <app-example-ngx-datatable/>
 
-  <h2 class="mat-typography">Ag-grid table Example</h2>
+  <h2 class="mat-typography">Ag-grid Table Example</h2>
 
   <app-example-ag-grid-table/>
 

projects/ngx-scrollbar-demo/src/app/lab/lab.component.html

@@ -184,9 +184,11 @@
                    [style.width.px]="(component.nativeElement.offsetWidth - (appearance === 'native' ? +variables.thickness + (+variables.trackOffset * 2) : 0)) * slider.contentWidth"
                    [innerHTML]="content"></div>
 
-              <div *ngIf="scrollToElementSelected" id="target">
-                <app-logo></app-logo>
-              </div>
+              @if (scrollToElementSelected) {
+                <div id="target">
+                  <app-logo></app-logo>
+                </div>
+              }
 
             </ng-scrollbar>
 

projects/ngx-scrollbar-demo/src/app/lab/lab.component.scss

@@ -61,3 +61,11 @@ nz-resize-handle {
   right: -20px;
   bottom: -20px;
 }
+
+#target {
+  position: absolute;
+  top: 300px;
+  left: 500px;
+  width: 100px;
+  height: 100px;
+}

projects/ngx-scrollbar-demo/src/app/lab/lab.component.ts

@@ -140,6 +140,7 @@ export class LabComponent {
     const options: Partial<SmoothScrollOptionsForm> = {
       [event.axisXProperty]: event.axisXValue,
       [event.axisYProperty]: event.axisYValue,
+      center: event.center,
       duration: event.duration
     };
     // This shows effect on play button when scrollTo has reached

projects/ngx-scrollbar-demo/src/app/lab/resize-form/resize-form.component.html

@@ -1,15 +1,21 @@
 <div class="testing-slider">
   <span>Content length</span>
-  <mat-slider color="accent" [min]="1" [max]="9">
-    <input matSliderThumb [(ngModel)]="value.contentSize" >
+  <mat-slider color="accent"
+              min="1"
+              max="9"
+              discrete
+              [displayWith]="contentWidthDisplayWith">
+    <input matSliderThumb [(ngModel)]="value().contentSize">
   </mat-slider>
 </div>
-<!--<mat-divider></mat-divider>-->
 <div class="testing-slider">
   <span>Content width</span>
   <mat-slider color="accent"
-              [min]="1" [max]="8" [step]="1"
+              min="1"
+              max="8"
+              step="1"
+              discrete
               [displayWith]="contentWidthDisplayWith">
-    <input matSliderThumb [(ngModel)]="value.contentWidth">
+    <input matSliderThumb [(ngModel)]="value().contentWidth">
   </mat-slider>
 </div>

projects/ngx-scrollbar-demo/src/app/lab/resize-form/resize-form.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewChecked, ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, model, ModelSignal, ChangeDetectionStrategy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -11,14 +11,9 @@ import { MatDividerModule } from '@angular/material/divider';
   standalone: true,
   imports: [MatSliderModule, FormsModule, MatDividerModule]
 })
-export class ResizeFormComponent implements AfterViewChecked {
+export class ResizeFormComponent {
 
-  @Input() value: ResizeChange;
-  @Output() valueChange: EventEmitter<ResizeChange> = new EventEmitter<ResizeChange>();
-
-  ngAfterViewChecked() {
-    this.valueChange.emit(this.value);
-  }
+  value: ModelSignal<ResizeChange> = model<ResizeChange>()
 
   contentWidthDisplayWith(value: number) {
     return `x${ value }`;