Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow specifying number of lines in a mat-list-item #15466

calebegg opened this Issue Mar 13, 2019 · 2 comments


None yet
2 participants
Copy link

calebegg commented Mar 13, 2019

The framework tries to be clever and count the mat-line children to determine whether to put mat-2-line and mat-3-line classes on a mat-list-item. Sometimes, though, the real contents is too complex to have top-level mat-line items, and I just want to specify that I want the mat-3-line styling. However, if I add this class myself, Angular helpfully removes it :/

It'd be great to be able to specify this somehow, possibly just through the class, or through a mat-3-line directive.

Right now, my workaround is to put some empty divs in like:

  <div mat-line></div>
  <div mat-line></div>
  <div mat-line></div>

This comment has been minimized.

Copy link

crisbeto commented Mar 18, 2019

@calebegg can you post what your template looks like? Rather than adding a separate API, it might make sense to mark our query as descendants: true so that it picks up all descendant items, rather than just the direct ones.


This comment has been minimized.

Copy link
Member Author

calebegg commented Mar 20, 2019

Oh, that would work. I didn't know it would be that easy.

It's basically something like:

  <div class="left">
    <h3 mat-line>foo</h3>
    <p mat-line>detail</p>
  <div class="right">
  <div class="actions">
    <button mat-icon-button>...</button>

I'd be tempted to put mat-line on the timestamp and status divs as well if I didn't understand how it worked, so I'm not sure if it's exactly clear what's happening, but it would definitely solve the issue for me and I think it would be an improvement over what we have now.

@crisbeto crisbeto self-assigned this Mar 20, 2019

crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 20, 2019

fix(list): not picking up indirect descendant lines
Fixes the `mat-list-item` not picking up `mat-line`, if it's not a direct descendant.

Fixes angular#15466.

@crisbeto crisbeto referenced a pull request that will close this issue Mar 20, 2019


fix(list): not picking up indirect descendant lines #15552

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.