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

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

@@ -17,7 +17,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` : '',
+    );
   }
 }