{"record":{"id":"89ae67ad0b90be06","repo":"angular/components","slug":"error-cdk-virtual-scroll-viewport-requires-the-i","errorCode":null,"errorMessage":"Error: cdk-virtual-scroll-viewport requires the \"itemSize\" property to be set.","messagePattern":"Error: cdk-virtual-scroll-viewport requires the \"itemSize\" property to be set\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/cdk/scrolling/virtual-scroll-viewport.ts","lineNumber":206,"sourceCode":"\n  private _changeDetectionNeeded = signal(false);\n\n  /** A list of functions to run after the next change detection cycle. */\n  private _runAfterChangeDetection: Function[] = [];\n\n  /** Subscription to changes in the viewport size. */\n  private _viewportChanges = Subscription.EMPTY;\n\n  private _injector = inject(Injector);\n\n  private _isDestroyed = false;\n\n  constructor() {\n    super();\n    const viewportRuler = inject(ViewportRuler);\n\n    if (!this._scrollStrategy && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw Error('Error: cdk-virtual-scroll-viewport requires the \"itemSize\" property to be set.');\n    }\n\n    this._viewportChanges = viewportRuler.change().subscribe(() => {\n      this.checkViewportSize();\n    });\n\n    if (!this.scrollable) {\n      // No scrollable is provided, so the virtual-scroll-viewport needs to become a scrollable\n      this.elementRef.nativeElement.classList.add('cdk-virtual-scrollable');\n      this.scrollable = this;\n    }\n\n    const ref = effect(\n      () => {\n        if (this._changeDetectionNeeded()) {\n          this._doChangeDetection();\n        }\n      },","sourceCodeStart":188,"sourceCodeEnd":224,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/cdk/scrolling/virtual-scroll-viewport.ts#L188-L224","documentation":"The cdk-virtual-scroll-viewport needs a scroll strategy to know item sizes; by default this comes from the required itemSize input. If no strategy has been configured and itemSize was not set, the constructor throws so the viewport fails fast instead of rendering nothing.","triggerScenarios":"Using <cdk-virtual-scroll-viewport> without an [itemSize] binding and without providing a custom scroll strategy via CDK_VIRTUAL_SCROLL_STRATEGY; forgetting the itemSize binding after refactoring to a custom strategy that was never injected.","commonSituations":"Copy-pasting the viewport element but dropping the [itemSize] attribute; dynamic item sizes handled by removing itemSize without supplying a CustomVirtualScrollStrategy provider; typos like [itemsize] that Angular ignores.","solutions":["Add the [itemSize] input to cdk-virtual-scroll-viewport (e.g. [itemSize]=\"50\" for 50px rows)","If item sizes vary, provide a custom strategy: { provide: CDK_VIRTUAL_SCROLL_STRATEGY, useClass: CustomVirtualScrollStrategy } in the viewport or component providers","Check for casing typos in the binding so Angular actually picks it up","If using fixed-size strategy via providedIn, verify it is registered on the viewport element"],"exampleFix":"<!-- before -->\n<cdk-virtual-scroll-viewport class=\"list\">\n  <div *cdkVirtualFor=\"let item of items\">{{item}}</div>\n</cdk-virtual-scroll-viewport>\n<!-- after -->\n<cdk-virtual-scroll-viewport class=\"list\" [itemSize]=\"48\">\n  <div *cdkVirtualFor=\"let item of items\">{{item}}</div>\n</cdk-virtual-scroll-viewport>","handlingStrategy":"validation","validationCode":"@Component({\n  template: `<cdk-virtual-scroll-viewport [itemSize]=\"itemSize\" ...>`,\n})\nclass ListComponent {\n  itemSize = input.required<number>(); // fail fast if the size is not provided\n}","typeGuard":"function hasScrollStrategyConfig(opts: { itemSize?: number; strategy?: VirtualScrollStrategy }): boolean {\n  return opts.itemSize != null || opts.strategy != null;\n}","tryCatchPattern":"try {\n  this.viewport && this.viewport.checkViewportSize();\n} catch (e) {\n  if (e instanceof Error && e.message.includes('itemSize')) {\n    console.error('cdk-virtual-scroll-viewport is missing the [itemSize] input or a CDK_VIRTUAL_SCROLL_STRATEGY provider.');\n  } else {\n    throw e;\n  }\n}","preventionTips":["Always set [itemSize] on cdk-virtual-scroll-viewport when using fixed-size scrolling","For variable item sizes, provide CDK_VIRTUAL_SCROLL_STRATEGY with a custom strategy class","Watch for binding typos ([itemsize]) that Angular silently ignores","Write a template type-check/test that asserts required inputs are present"],"tags":["angular","cdk","virtual-scroll","missing-property","configuration"],"backgroundTag":"missing-required-input","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}