{"record":{"id":"fabc8fe65ea1cd26","repo":"angular/components","slug":"a-list-item-cannot-have-wrapping-content-without-a","errorCode":null,"errorMessage":"A list item cannot have wrapping content without a title.","messagePattern":"A list item cannot have wrapping content without a title\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/material/list/list-base.ts","lineNumber":345,"sourceCode":" * 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":327,"sourceCodeEnd":351,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/list/list-base.ts#L327-L351","documentation":"List items with wrapping (unscoped, non-title/line) text must have a title for proper layout. `sanityCheckListItemContent` warns in dev mode when an item has no title, has unscoped text content, and explicitly declares more than one line — meaning wrapping content exists without a primary title element.","triggerScenarios":"A list item where `_explicitLines` is set (>1, e.g. via `lines` input or multiple `matListItemLine`), no `matListItemTitle` exists, and the item contains raw text nodes (`_hasUnscopedTextContent`), detected during `_updateItemLines`.","commonSituations":"Items built from free-form text plus several line spans (like old two/three-line list markup) after upgrading to the title/line API; templates with interpolated text directly inside `mat-list-item`.","solutions":["Wrap the primary text in a `<span matListItemTitle>` so wrapping content has a title.","Move free text into title/line elements rather than leaving unscoped content.","If the item is intentionally a single-line item, remove the extra explicit lines."],"exampleFix":"<!-- before -->\n<mat-list-item lines=\"2\">\n  Some long wrapping text\n  <span matListItemLine>Extra</span>\n</mat-list-item>\n\n<!-- after -->\n<mat-list-item>\n  <span matListItemTitle>Some long wrapping text</span>\n  <span matListItemLine>Extra</span>\n</mat-list-item>","handlingStrategy":"validation","validationCode":"const hasTitle = !!item.querySelector('[matListItemTitle]');\nconst hasRawText = [...item.childNodes].some(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim());\nconst lineCount = +item.getAttribute('lines') || 0;\nif (!hasTitle && hasRawText && lineCount > 1) console.warn('Wrapping content needs a title.');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never leave raw text nodes directly inside mat-list-item; use title/line directives.","Replace free-text + lines patterns when migrating old list markup.","Check rendering in dev mode where these sanity checks run."],"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"}