fix(cdk/scrolling): move setting transform to ngAfterViewChecked

angular · Apr 25, 2024 · ba1879a · ba1879a
1 parent f8c0b8d
commit ba1879a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts
@@ -11,6 +11,7 @@ import {ListRange} from '@angular/cdk/collections';
 import {Platform} from '@angular/cdk/platform';
 import {
   afterNextRender,
+  AfterViewChecked,
   booleanAttribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -81,7 +82,10 @@ const SCROLL_SCHEDULER =
     },
   ],
 })
-export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements OnInit, OnDestroy {
+export class CdkVirtualScrollViewport
+  extends CdkVirtualScrollable
+  implements AfterViewChecked, OnInit, OnDestroy
+{
   private _platform = inject(Platform);
 
   /** Emits when the viewport is detached from a CdkVirtualForOf. */
@@ -504,6 +508,14 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     }
   }
 
+  ngAfterViewChecked() {
+    // Apply the content transform. The transform can't be set via an Angular binding because
+    // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
+    // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
+    // the `Number` function first to coerce it to a numeric value.
+    this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
+  }
+
   /** Run change detection. */
   private _doChangeDetection() {
     if (this._isDestroyed) {
@@ -515,11 +527,6 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
       afterNextRender(
         () => {
           this._isChangeDetectionPending = false;
-          // Apply the content transform. The transform can't be set via an Angular binding because
-          // bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
-          // string literals, a variable that can only be 'X' or 'Y', and user input that is run through
-          // the `Number` function first to coerce it to a numeric value.
-          this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
           const runAfterChangeDetection = this._runAfterChangeDetection;
           this._runAfterChangeDetection = [];
           for (const fn of runAfterChangeDetection) {

diff --git a/tools/public_api_guard/cdk/scrolling.md b/tools/public_api_guard/cdk/scrolling.md
@@ -4,6 +4,7 @@
 
 ```ts
 
+import { AfterViewChecked } from '@angular/core';
 import { ChangeDetectorRef } from '@angular/core';
 import { CollectionViewer } from '@angular/cdk/collections';
 import { DataSource } from '@angular/cdk/collections';
@@ -183,7 +184,7 @@ export interface CdkVirtualScrollRepeater<T> {
 }
 
 // @public
-export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements OnInit, OnDestroy {
+export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements AfterViewChecked, OnInit, OnDestroy {
     constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, ngZone: NgZone, _scrollStrategy: VirtualScrollStrategy, dir: Directionality, scrollDispatcher: ScrollDispatcher, viewportRuler: ViewportRuler, scrollable: CdkVirtualScrollable);
     appendOnly: boolean;
     attach(forOf: CdkVirtualScrollRepeater<any>): void;
@@ -205,6 +206,8 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     // (undocumented)
     static ngAcceptInputType_appendOnly: unknown;
     // (undocumented)
+    ngAfterViewChecked(): void;
+    // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;