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

[calebegg]

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>

[crisbeto]

@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.

[calebegg]

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

It's basically something like:

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

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.

[angular-automatic-lock-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.}