angular/components · warning

A list item cannot have wrapping content without a title.

Error message

A list item cannot have wrapping content without a title.

What it means

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.

Source

Thrown at src/material/list/list-base.ts:345

 * eliminated by Terser or other optimizers in production mode.
 */
function sanityCheckListItemContent(item: MatListItemBase) {
  const numTitles = item._titles!.length;
  const numLines = item._lines!.length;

  if (numTitles > 1) {
    console.warn('A list item cannot have multiple titles.');
  }
  if (numTitles === 0 && numLines > 0) {
    console.warn('A list item line can only be used if there is a list item title.');
  }
  if (
    numTitles === 0 &&
    item._hasUnscopedTextContent &&
    item._explicitLines !== null &&
    item._explicitLines > 1
  ) {
    console.warn('A list item cannot have wrapping content without a title.');
  }
  if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {
    console.warn('A list item can have at maximum three lines.');
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Wrap the primary text in a `<span matListItemTitle>` so wrapping content has a title.
2. Move free text into title/line elements rather than leaving unscoped content.
3. If the item is intentionally a single-line item, remove the extra explicit lines.

Example fix

<!-- before -->
<mat-list-item lines="2">
  Some long wrapping text
  <span matListItemLine>Extra</span>
</mat-list-item>

<!-- after -->
<mat-list-item>
  <span matListItemTitle>Some long wrapping text</span>
  <span matListItemLine>Extra</span>
</mat-list-item>

const hasTitle = !!item.querySelector('[matListItemTitle]');
const hasRawText = [...item.childNodes].some(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim());
const lineCount = +item.getAttribute('lines') || 0;
if (!hasTitle && hasRawText && lineCount > 1) console.warn('Wrapping content needs a title.');

When it happens

Trigger: 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`.

Common situations: 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`.

Related errors

• A list item cannot have multiple titles.
• A list item line can only be used if there is a list item ti
• A list item can have at maximum three lines.
• Unable to retrieve options for autocomplete. Autocomplete pa
• Unable to retrieve option groups for autocomplete. Autocompl

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/fabc8fe65ea1cd26. Report an issue: GitHub.