{"record":{"id":"fdbd1e546f248dd8","repo":"angular/components","slug":"a-list-item-cannot-have-multiple-titles","errorCode":null,"errorMessage":"A list item cannot have multiple titles.","messagePattern":"A list item cannot have multiple titles\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/material/list/list-base.ts","lineNumber":334,"sourceCode":"    )\n      .filter(node => node.nodeType !== node.COMMENT_NODE)\n      .some(node => !!(node.textContent && node.textContent.trim()));\n  }\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":316,"sourceCodeEnd":351,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/list/list-base.ts#L316-L351","documentation":"Material list items support at most one title (`matListItemTitle`) plus optional lines. `sanityCheckListItemContent` counts collected title content-children and warns in dev mode when more than one is found, since extra titles break the expected visual and DOM structure of list items.","triggerScenarios":"A `<mat-list-item>` / `<mat-option>`-style list item containing two or more elements or directives matching `matListItemTitle`, e.g. two `<span matListItemTitle>` elements, inside `_updateItemLines` processing.","commonSituations":"Copying a two-line item and pasting title markup twice; wrapping title in multiple spans each marked as title; migrating from old `matLine` markup where the first line was effectively the title.","solutions":["Keep exactly one `matListItemTitle` per list item; demote extra ones to `matListItemLine`.","Merge duplicate title text into a single title element.","Use `matListItemMeta` for trailing secondary content instead of a second title."],"exampleFix":"<!-- before -->\n<mat-list-item>\n  <span matListItemTitle>Name</span>\n  <span matListItemTitle>Email</span>\n</mat-list-item>\n\n<!-- after -->\n<mat-list-item>\n  <span matListItemTitle>Name</span>\n  <span matListItemLine>email@example.com</span>\n</mat-list-item>","handlingStrategy":"validation","validationCode":"const titles = item.querySelectorAll('[matListItemTitle]');\nif (titles.length > 1) console.warn('List item may only have one title.');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Standardize list item templates so each has exactly one matListItemTitle.","Use matListItemMeta for secondary/trailing content, not extra titles.","Review list markup during Material version migrations."],"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"}