Components: Document how to use secondary actions in lists

[thw0rted]

Bug, feature request, or proposal:

Improved documentation

What is the expected behavior?

It should be possible to include one or more buttons (or "infos") as a secondary action in a list item per the spec.

What is the current behavior?

The List documentation and examples do not show secondary actions.

Is there anything else we should know?

The documentation for Lists in Material 1 show extensive examples, including (at the very end) the use of multiple secondary actions, via the md-secondary class. I'm guessing this is probably already possible in Material 2 but I can't figure out how. (For the time being, I'm hacking it together with manual float:right and some margin twiddling.)

[BobBDE]

Hi,

I think it's possible if we look at the demo app : https://material2-test.firebaseapp.com/list
You can find the linked code over here : https://github.com/angular/material2/blob/master/src/demo-app/list/list-demo.html

Looks like something like this :
<md-nav-list> <md-list-item *ngFor="let link of links"> <a md-line href="http://www.google.com">{{ link.name }}</a> <button md-icon-button (click)="infoClicked=!infoClicked"> <md-icon>info</md-icon> </button> </md-list-item> </md-nav-list>

I think this also work with the classic md-list, not only for the md-nav_list

[thw0rted]

Thanks, that's helpful. It looks like you don't need a secondary class, the action is automatically put in the right place. I'd still like to see this on the official doc site, though.

Also, this points out an interesting bug -- the click target for md-nav-list items that define a link and a button, is not as tall as the entire list item. To see what I mean, hover over one of the items with a secondary action, then click near the top of the highlighted area. You'll see that your click does nothing. You need to click within a few pixels of the top of the text for it to register.

I'll file a separate issue for that.

[tschaffter]

the click target for md-nav-list items that define a link and a button, is not as tall as the entire list item. To see what I mean, hover over one of the items with a secondary action, then click near the top of the highlighted area. You'll see that your click does nothing. You need to click within a few pixels of the top of the text for it to register.

@thw0rted Where have you filled this issue? It doesn't seem to be resolved in material 5.0.1.

The solution would be to either 1) provide "md-secondary" in material 5 as in material JS or 2) fix the bug describe by thw0rted. 1) should be preferred as it would be preferable to specify the primary click action once on mat-list-item rather than specifying the click action on the avatar AND the label.

[thw0rted]

I filed #6617 but see also #9188. Basically, putting <a matLine> inside a <mat-nav-list> <mat-list-item> is a bad idea. If you want the whole list item to have a click action, attach a click handler to the list item and use <p matLine> for your text content instead. I can't remember if you have to manually stop event propagation on the secondary actions or not, but you can play with it.

Maybe it would be possible to somehow make <a matListItem> work with secondary actions nested inside? I'm pretty sure it doesn't now.

[jotatoledo]

I just came across this issue while trying to reproduce one of the examples of materialjs, specifically the one that @thw0rted pointed out. Would be nice to hear from the dev team if its currently possible to archive the same with the current implementation of mat-list. I currently implemented something but I had to invoke stopPropagation to not trigger the "main" action binded to the mat-list-item.