fix(cdk-experimental/scrolling): Fix ExpressionChangedAfterItWasCheckedError

This fixes an expressionchanged... error in the scrolling where template updates
were not accompanied by a change notification (`markforCheck`/signal
update, etc).

Author: atscott

goldens/cdk/scrolling/index.api.md

@@ -205,8 +205,8 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
     setRenderedContentOffset(offset: number, to?: 'to-start' | 'to-end'): void;
     setRenderedRange(range: ListRange): void;
     setTotalContentSize(size: number): void;
-    _totalContentHeight: string;
-    _totalContentWidth: string;
+    _totalContentHeight: i0.WritableSignal<string>;
+    _totalContentWidth: i0.WritableSignal<string>;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkVirtualScrollViewport, "cdk-virtual-scroll-viewport", never, { "orientation": { "alias": "orientation"; "required": false; }; "appendOnly": { "alias": "appendOnly"; "required": false; }; }, { "scrolledIndexChange": "scrolledIndexChange"; }, never, ["*"], true, never>;
     // (undocumented)

src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts

@@ -1,11 +1,5 @@
 import {CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling';
-import {
-  Component,
-  Input,
-  provideCheckNoChangesConfig,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
+import {Component, Input, ViewChild, ViewEncapsulation} from '@angular/core';
 import {ComponentFixture, TestBed, fakeAsync, flush, waitForAsync} from '@angular/core/testing';
 import {ScrollingModule as ExperimentalScrollingModule} from './scrolling-module';
 
@@ -17,7 +11,6 @@ describe('CdkVirtualScrollViewport', () => {
 
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
-        providers: [provideCheckNoChangesConfig({exhaustive: false})],
         imports: [ScrollingModule, ExperimentalScrollingModule, AutoSizeVirtualScroll],
       });
     }));

src/cdk/scrolling/virtual-scroll-viewport.html

@@ -10,4 +10,4 @@
   so that the scrollbar captures the size of the entire data set.
 -->
 <div class="cdk-virtual-scroll-spacer"
-     [style.width]="_totalContentWidth" [style.height]="_totalContentHeight"></div>
+     [style.width]="_totalContentWidth()" [style.height]="_totalContentHeight()"></div>

src/cdk/scrolling/virtual-scroll-viewport.ts

@@ -23,6 +23,7 @@ import {
   OnInit,
   Optional,
   Output,
+  signal,
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
@@ -137,10 +138,10 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
   private _totalContentSize = 0;
 
   /** A string representing the `style.width` property value to be used for the spacer element. */
-  _totalContentWidth = '';
+  _totalContentWidth = signal('');
 
   /** A string representing the `style.height` property value to be used for the spacer element. */
-  _totalContentHeight = '';
+  _totalContentHeight = signal('');
 
   /**
    * The CSS transform applied to the rendered subset of items so that they appear within the bounds
@@ -533,9 +534,11 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
 
   /** Calculates the `style.width` and `style.height` for the spacer element. */
   private _calculateSpacerSize() {
-    this._totalContentHeight =
-      this.orientation === 'horizontal' ? '' : `${this._totalContentSize}px`;
-    this._totalContentWidth =
-      this.orientation === 'horizontal' ? `${this._totalContentSize}px` : '';
+    this._totalContentHeight.set(
+      this.orientation === 'horizontal' ? '' : `${this._totalContentSize}px`,
+    );
+    this._totalContentWidth.set(
+      this.orientation === 'horizontal' ? `${this._totalContentSize}px` : '',
+    );
   }
 }