main - 6b02256 refactor: migrate example inputs to signal inputs (#29789)

Author: devversion

cdk/scrolling/index.d.ts

@@ -1,6 +1,7 @@
 import { CollectionViewer } from '@angular/cdk/collections';
 import { DataSource } from '@angular/cdk/collections';
 import * as i0 from '@angular/core';
+import { InputSignal } from '@angular/core';
 import { Observable } from 'rxjs';
 
 /** @title Virtual scroll with view recycling disabled. */
@@ -78,10 +79,10 @@ export declare class CdkVirtualScrollTemplateCacheExample {
 
 /** @title Virtual scrolling window */
 export declare class CdkVirtualScrollWindowScrollingExample {
-    shouldRun: boolean;
+    readonly shouldRun: InputSignal<boolean>;
     items: string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkVirtualScrollWindowScrollingExample, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CdkVirtualScrollWindowScrollingExample, "cdk-virtual-scroll-window-scrolling-example", never, { "shouldRun": { "alias": "shouldRun"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CdkVirtualScrollWindowScrollingExample, "cdk-virtual-scroll-window-scrolling-example", never, { "shouldRun": { "alias": "shouldRun"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 declare class MyDataSource extends DataSource<string | undefined> {

docs-content/examples-highlighted/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example-html.html

@@ -1,11 +1,11 @@
-@if (shouldRun) {
+@if (shouldRun()) {
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-header&quot;</span>&gt;</span>Content before<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">cdk-virtual-scroll-viewport</span> <span class="hljs-attr">scrollWindow</span> <span class="hljs-attr">itemSize</span>=<span class="hljs-string">&quot;50&quot;</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">div</span> *<span class="hljs-attr">cdkVirtualFor</span>=<span class="hljs-string">&quot;let item of items&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-item&quot;</span>&gt;</span>{{item}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-virtual-scroll-viewport</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-footer&quot;</span>&gt;</span>Content after<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 }
 
-@if (!shouldRun) {
+@if (!shouldRun()) {
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Please open on StackBlitz to see result<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 }

docs-content/examples-highlighted/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example-ts.html

@@ -1,4 +1,4 @@
-<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component, Input} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component, input} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
 <span class="hljs-keyword">import</span> {ScrollingModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/cdk/scrolling&#x27;</span>;
 
 <span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Virtual scrolling window */</span>
@@ -11,7 +11,7 @@
   <span class="hljs-attr">imports</span>: [ScrollingModule],
 })
 <span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CdkVirtualScrollWindowScrollingExample</span> </span>{
-  <span class="hljs-meta">@Input</span>() shouldRun = <span class="hljs-regexp">/(^|.)(stackblitz|webcontainer).(io|com)$/</span>.test(<span class="hljs-built_in">window</span>.location.host);
+  <span class="hljs-keyword">readonly</span> shouldRun = input(<span class="hljs-regexp">/(^|.)(stackblitz|webcontainer).(io|com)$/</span>.test(<span class="hljs-built_in">window</span>.location.host));
 
   items = <span class="hljs-built_in">Array</span>.from({<span class="hljs-attr">length</span>: <span class="hljs-number">100000</span>}).map(<span class="hljs-function">(<span class="hljs-params">_, i</span>) =&gt;</span> <span class="hljs-string">`Item #<span class="hljs-subst">${i}</span>`</span>);
 }

docs-content/examples-highlighted/material/table/table-wrapped/table-wrapped-example-ts.html

@@ -3,12 +3,12 @@
   AfterContentInit,
   Component,
   ContentChildren,
-  Input,
   AfterViewInit,
   QueryList,
   ViewChild,
   ContentChild,
   forwardRef,
+  input,
 } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
 <span class="hljs-keyword">import</span> {MatSort, MatSortModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/sort&#x27;</span>;
 <span class="hljs-keyword">import</span> {
@@ -94,9 +94,8 @@
 
   <span class="hljs-meta">@ViewChild</span>(MatTable, {<span class="hljs-attr">static</span>: <span class="hljs-literal">true</span>}) table: MatTable&lt;T&gt;;
 
-  <span class="hljs-meta">@Input</span>() columns: <span class="hljs-built_in">string</span>[];
-
-  <span class="hljs-meta">@Input</span>() dataSource: DataSource&lt;T&gt;;
+  <span class="hljs-keyword">readonly</span> columns = input.required&lt;<span class="hljs-built_in">string</span>[]&gt;();
+  <span class="hljs-keyword">readonly</span> dataSource = input.required&lt;DataSource&lt;T&gt;&gt;();
 
   <span class="hljs-function"><span class="hljs-title">ngAfterContentInit</span>(<span class="hljs-params"></span>)</span> {
     <span class="hljs-built_in">this</span>.columnDefs.forEach(<span class="hljs-function"><span class="hljs-params">columnDef</span> =&gt;</span> <span class="hljs-built_in">this</span>.table.addColumnDef(columnDef));

docs-content/examples-highlighted/material/table/table-wrapped/wrapper-table-html.html

@@ -1,4 +1,4 @@
-<span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">mat-table</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-elevation-z8&quot;</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">mat-table</span> [<span class="hljs-attr">dataSource</span>]=<span class="hljs-string">&quot;dataSource()&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-elevation-z8&quot;</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">ng-content</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ng-content</span>&gt;</span>
 
   <span class="hljs-comment">&lt;!-- Position Column --&gt;</span>

docs-content/examples-source/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.html

@@ -1,11 +1,11 @@
-@if (shouldRun) {
+@if (shouldRun()) {
   <div class="example-header">Content before</div>
   <cdk-virtual-scroll-viewport scrollWindow itemSize="50">
     <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
   </cdk-virtual-scroll-viewport>
   <div class="example-footer">Content after</div>
 }
 
-@if (!shouldRun) {
+@if (!shouldRun()) {
   <div>Please open on StackBlitz to see result</div>
 }

docs-content/examples-source/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 
 /** @title Virtual scrolling window */
@@ -11,7 +11,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
   imports: [ScrollingModule],
 })
 export class CdkVirtualScrollWindowScrollingExample {
-  @Input() shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
+  readonly shouldRun = input(/(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host));
 
   items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
 }

docs-content/examples-source/material/table/table-wrapped/table-wrapped-example.ts

@@ -3,12 +3,12 @@ import {
   AfterContentInit,
   Component,
   ContentChildren,
-  Input,
   AfterViewInit,
   QueryList,
   ViewChild,
   ContentChild,
   forwardRef,
+  input,
 } from '@angular/core';
 import {MatSort, MatSortModule} from '@angular/material/sort';
 import {
@@ -94,9 +94,8 @@ export class WrapperTable<T> implements AfterContentInit {
 
   @ViewChild(MatTable, {static: true}) table: MatTable<T>;
 
-  @Input() columns: string[];
-
-  @Input() dataSource: DataSource<T>;
+  readonly columns = input.required<string[]>();
+  readonly dataSource = input.required<DataSource<T>>();
 
   ngAfterContentInit() {
     this.columnDefs.forEach(columnDef => this.table.addColumnDef(columnDef));

docs-content/examples-source/material/table/table-wrapped/wrapper-table.html

@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource()" class="mat-elevation-z8">
   <ng-content></ng-content>
 
   <!-- Position Column -->

fesm2022/cdk/scrolling.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input } from '@angular/core';
 import * as i1 from '@angular/cdk/scrolling';
 import { ScrollingModule, FixedSizeVirtualScrollStrategy, VIRTUAL_SCROLL_STRATEGY } from '@angular/cdk/scrolling';
 import { DataSource } from '@angular/cdk/collections';
@@ -232,18 +232,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3",
 /** @title Virtual scrolling window */
 class CdkVirtualScrollWindowScrollingExample {
     constructor() {
-        this.shouldRun = /(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host);
+        this.shouldRun = input(/(^|.)(stackblitz|webcontainer).(io|com)$/.test(window.location.host));
         this.items = Array.from({ length: 100000 }).map((_, i) => `Item #${i}`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: CdkVirtualScrollWindowScrollingExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: CdkVirtualScrollWindowScrollingExample, isStandalone: true, selector: "cdk-virtual-scroll-window-scrolling-example", inputs: { shouldRun: "shouldRun" }, ngImport: i0, template: "@if (shouldRun) {\n  <div class=\"example-header\">Content before</div>\n  <cdk-virtual-scroll-viewport scrollWindow itemSize=\"50\">\n    <div *cdkVirtualFor=\"let item of items\" class=\"example-item\">{{item}}</div>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"example-footer\">Content after</div>\n}\n\n@if (!shouldRun) {\n  <div>Please open on StackBlitz to see result</div>\n}\n", styles: [".example-item {\n  height: 50px;\n}\n\n.example-header,\n.example-footer {\n  height: 100px;\n  background: lightgray;\n}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i1.CdkVirtualScrollableWindow, selector: "cdk-virtual-scroll-viewport[scrollWindow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.0-next.3", type: CdkVirtualScrollWindowScrollingExample, isStandalone: true, selector: "cdk-virtual-scroll-window-scrolling-example", inputs: { shouldRun: { classPropertyName: "shouldRun", publicName: "shouldRun", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (shouldRun()) {\n  <div class=\"example-header\">Content before</div>\n  <cdk-virtual-scroll-viewport scrollWindow itemSize=\"50\">\n    <div *cdkVirtualFor=\"let item of items\" class=\"example-item\">{{item}}</div>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"example-footer\">Content after</div>\n}\n\n@if (!shouldRun()) {\n  <div>Please open on StackBlitz to see result</div>\n}\n", styles: [".example-item {\n  height: 50px;\n}\n\n.example-header,\n.example-footer {\n  height: 100px;\n  background: lightgray;\n}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i1.CdkVirtualScrollableWindow, selector: "cdk-virtual-scroll-viewport[scrollWindow]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.0-next.3", ngImport: i0, type: CdkVirtualScrollWindowScrollingExample, decorators: [{
             type: Component,
-            args: [{ selector: 'cdk-virtual-scroll-window-scrolling-example', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ScrollingModule], template: "@if (shouldRun) {\n  <div class=\"example-header\">Content before</div>\n  <cdk-virtual-scroll-viewport scrollWindow itemSize=\"50\">\n    <div *cdkVirtualFor=\"let item of items\" class=\"example-item\">{{item}}</div>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"example-footer\">Content after</div>\n}\n\n@if (!shouldRun) {\n  <div>Please open on StackBlitz to see result</div>\n}\n", styles: [".example-item {\n  height: 50px;\n}\n\n.example-header,\n.example-footer {\n  height: 100px;\n  background: lightgray;\n}\n"] }]
-        }], propDecorators: { shouldRun: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cdk-virtual-scroll-window-scrolling-example', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ScrollingModule], template: "@if (shouldRun()) {\n  <div class=\"example-header\">Content before</div>\n  <cdk-virtual-scroll-viewport scrollWindow itemSize=\"50\">\n    <div *cdkVirtualFor=\"let item of items\" class=\"example-item\">{{item}}</div>\n  </cdk-virtual-scroll-viewport>\n  <div class=\"example-footer\">Content after</div>\n}\n\n@if (!shouldRun()) {\n  <div>Please open on StackBlitz to see result</div>\n}\n", styles: [".example-item {\n  height: 50px;\n}\n\n.example-header,\n.example-footer {\n  height: 100px;\n  background: lightgray;\n}\n"] }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.