angular/components · warning

A list item cannot have multiple titles.

Error message

A list item cannot have multiple titles.

What it means

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.

Source

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

    )
      .filter(node => node.nodeType !== node.COMMENT_NODE)
      .some(node => !!(node.textContent && node.textContent.trim()));
  }
}

/**
 * Sanity checks the configuration of the list item with respect to the amount
 * of lines, whether there is a title, or if there is unscoped text content.
 *
 * The checks are extracted into a top-level function that can be dead-code
 * 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. Keep exactly one `matListItemTitle` per list item; demote extra ones to `matListItemLine`.
2. Merge duplicate title text into a single title element.
3. Use `matListItemMeta` for trailing secondary content instead of a second title.

Example fix

<!-- before -->
<mat-list-item>
  <span matListItemTitle>Name</span>
  <span matListItemTitle>Email</span>
</mat-list-item>

<!-- after -->
<mat-list-item>
  <span matListItemTitle>Name</span>
  <span matListItemLine>email@example.com</span>
</mat-list-item>

const titles = item.querySelectorAll('[matListItemTitle]');
if (titles.length > 1) console.warn('List item may only have one title.');

When it happens

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

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

Related errors

• A list item line can only be used if there is a list item ti
• A list item cannot have wrapping content without a title.
• 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/fdbd1e546f248dd8. Report an issue: GitHub.