{"record":{"id":"0a0d79260a819a92","repo":"angular/components","slug":"mat-grid-list-must-pass-in-number-of-columns-exa","errorCode":null,"errorMessage":"mat-grid-list: must pass in number of columns. Example: <mat-grid-list cols=\"3\">","messagePattern":"mat-grid-list: must pass in number of columns\\. Example: <mat-grid-list cols=\"3\">","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/material/grid-list/grid-list.ts","lineNumber":133,"sourceCode":"  }\n\n  ngOnInit() {\n    this._checkCols();\n    this._checkRowHeight();\n  }\n\n  /**\n   * The layout calculation is fairly cheap if nothing changes, so there's little cost\n   * to run it frequently.\n   */\n  ngAfterContentChecked() {\n    this._layoutTiles();\n  }\n\n  /** Throw a friendly error if cols property is missing */\n  private _checkCols() {\n    if (!this.cols && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw Error(\n        `mat-grid-list: must pass in number of columns. ` + `Example: <mat-grid-list cols=\"3\">`,\n      );\n    }\n  }\n\n  /** Default to equal width:height if rowHeight property is missing */\n  private _checkRowHeight(): void {\n    if (!this._rowHeight) {\n      this._setTileStyler('1:1');\n    }\n  }\n\n  /** Creates correct Tile Styler subtype based on rowHeight passed in by user */\n  private _setTileStyler(rowHeight: string): void {\n    if (this._tileStyler) {\n      this._tileStyler.reset(this);\n    }\n","sourceCodeStart":115,"sourceCodeEnd":151,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/grid-list/grid-list.ts#L115-L151","documentation":"mat-grid-list requires the cols input to know how many columns to lay tiles out into. ngOnInit calls _checkCols and throws this friendly dev-mode error when cols is missing, zero, or falsy.","triggerScenarios":"Using <mat-grid-list> without the cols attribute, with cols=\"\" , cols bound to an undefined/null/0 variable (e.g. [cols]=\"columnCount\" where columnCount is undefined at first render).","commonSituations":"Binding cols to an async value that hasn't resolved yet; forgetting the attribute when hand-writing the component; renaming a component variable without updating the binding; SSR/first-change timing where data arrives after ngOnInit.","solutions":["Add the cols attribute: <mat-grid-list cols=\"3\">.","Guard the rendering until the column count is known: *ngIf=\"cols\" around the grid or the host component.","Provide a fallback in the binding: [cols]=\"cols || 3\".","Initialize the component property that feeds [cols] to a valid number > 0."],"exampleFix":"// before\n<mat-grid-list [rowHeight]=\"'1:1'\" [cols]=\"numCols\">\n// after\n<mat-grid-list [rowHeight]=\"'1:1'\" [cols]=\"numCols || 4\" *ngIf=\"numCols\">\n  <!-- tiles -->\n</mat-grid-list>","handlingStrategy":"validation","validationCode":"// in the component before rendering\nget safeCols(): number { return this.cols && this.cols > 0 ? this.cols : 4; }\n// template: <mat-grid-list [cols]=\"safeCols\">","typeGuard":"function hasValidCols(cols: unknown): cols is number {\n  return typeof cols === 'number' && Number.isInteger(cols) && cols > 0;\n}","tryCatchPattern":null,"preventionTips":["Always set cols explicitly on every mat-grid-list.","Guard bindings that depend on async data with *ngIf until the value exists.","Add a default fallback in the binding: [cols]=\"cols || 4\"."],"tags":["angular-material","grid-list","missing-input","dev-mode"],"backgroundTag":"missing-required-input","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}