Components: mat-list-item doesn't have ripple when transcluded into mat-nav-list

[tylerbrockett]

Bug, feature request, or proposal:

mat-list-item element doesn't have ripple when it is transcluded into

<mat-nav-list>
    <ng-content></ng-content>
</mat-nav-list>

What is the expected behavior?

<mat-list-item> element should have ripple

What is the current behavior?

<mat-list-item> doesn't have ripple

What are the steps to reproduce?

Plunker Link

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Tested on:
Material 5.0.4
Angular 5.2.0
Windows 10
Chrome 63.0.x

[devversion]

Technically the behavior is correct. Ripples are only shown for mat-list-item elements that are part of a <mat-nav-list>.

Since Angular instantiates the <mat-list-item> before the transclusion happened, the list-item isn't able to figure out that it's part of a <mat-nav-list>. The list item just checks using dependency injection if there is a parent MatNavList instance.

<custom-component>
  <mat-list-item>
    Doesn't have ripple
  </mat-list-item>
</custom-component>

[tylerbrockett]

Makes sense, thanks. I was thinking it was always a part of the <mat-list-item> element. I didn't realize it has different behavior between <mat-nav-list> and <mat-list>, which explains why it's not always on the list item element.

I was able to find a workaround by manually adding the mat-ripple directive to the <mat-list-item> and setting style to position: relative as well.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}