Skip to content

bug(MatList): content projected mat-list-items do not apply mat-mdc-list-item-interactiveΒ #27608

@Cowraider

Description

@Cowraider

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.2.6

Description

After updating to Angular v15 projecting mat-list-items into the mat-nav-list does no longer work as expected. The hover effect is not working as the class mat-mdc-list-item-interactive is not added.

<mat-nav-list>
  <ng-container *ngTemplateOutlet="items"></ng-container>
</mat-nav-list>

<ng-template #items>
  <a mat-list-item href="https://google.com"> google </a>
  <a mat-list-item href="https://angular.io"> angular </a>
</ng-template>

Reproduction

StackBlitz link: https://stackblitz.com/edit/ng5v1w-bbsdvs?file=src%2Fexample%2Flist-overview-example.html
Steps to reproduce:

  1. hover over not working items

Expected Behavior

Content projected items should behave like they were added "directly".

Actual Behavior

Mat-list-items do not get the mat-mdc-list-item-interactive class and therefore displayed as non-interactive.

Environment

  • Angular: 15.2.9
  • CDK/Material: 15.2.9
  • Browser(s): Firefox/Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/list

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions