{"record":{"id":"1fe3e57bd6395df8","repo":"angular/components","slug":"a-list-item-line-can-only-be-used-if-there-is-a-li","errorCode":null,"errorMessage":"A list item line can only be used if there is a list item title.","messagePattern":"A list item line can only be used if there is a list item title\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/material/list/list-base.ts","lineNumber":337,"sourceCode":"  }\n}\n\n/**\n * Sanity checks the configuration of the list item with respect to the amount\n * of lines, whether there is a title, or if there is unscoped text content.\n *\n * The checks are extracted into a top-level function that can be dead-code\n * eliminated by Terser or other optimizers in production mode.\n */\nfunction sanityCheckListItemContent(item: MatListItemBase) {\n  const numTitles = item._titles!.length;\n  const numLines = item._lines!.length;\n\n  if (numTitles > 1) {\n    console.warn('A list item cannot have multiple titles.');\n  }\n  if (numTitles === 0 && numLines > 0) {\n    console.warn('A list item line can only be used if there is a list item title.');\n  }\n  if (\n    numTitles === 0 &&\n    item._hasUnscopedTextContent &&\n    item._explicitLines !== null &&\n    item._explicitLines > 1\n  ) {\n    console.warn('A list item cannot have wrapping content without a title.');\n  }\n  if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {\n    console.warn('A list item can have at maximum three lines.');\n  }\n}\n","sourceCodeStart":319,"sourceCodeEnd":351,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/list/list-base.ts#L319-L351","documentation":"A `matListItemLine` (secondary line) only makes sense when the item also has a title. When `sanityCheckListItemContent` (called from `_updateItemLines`) finds zero titles but one or more lines, it warns in dev mode because the line has no primary content to belong to and the item renders incorrectly.","triggerScenarios":"A list item with `<span matListItemLine>` (or legacy `matLine`) content but no `matListItemTitle`, or relying on unscoped text as an implicit title while explicitly marking only lines.","commonSituations":"Migrating old `mat-list-item` markup that used bare text plus `matLine` spans to the new title/line directives without adding a title; deleting the title element during a refactor.","solutions":["Add a `<span matListItemTitle>` as the primary content of the item.","If the text was meant to be the title, mark it with `matListItemTitle` instead of `matListItemLine`.","Remove the orphan line if the item should only show a single line of text."],"exampleFix":"<!-- before -->\n<mat-list-item>\n  <span matListItemLine>Secondary info</span>\n</mat-list-item>\n\n<!-- after -->\n<mat-list-item>\n  <span matListItemTitle>Primary</span>\n  <span matListItemLine>Secondary info</span>\n</mat-list-item>","handlingStrategy":"validation","validationCode":"if (item.querySelector('[matListItemLine]') && !item.querySelector('[matListItemTitle]')) {\n  console.warn('List item line requires a title.');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always add a title when using lines in list items.","Update legacy matLine-based markup to the title/line API, not just renaming directives.","Render sample list items in dev mode to catch warnings early."],"tags":["angular","material","list","content-validation","dev-mode-warning"],"backgroundTag":"invalid-list-item-content","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}