Material: md-list-item active class

[vinnitu]

doesn't work or not exists in nature, am I right?

[topherfangio]

There currently is no active class on the md-list-item. What exactly are you trying to achieve?

[topherfangio]

@vinnitu Can you please provide some additional information about this so that we can respond?

[joerideg]

Hi @topherfangio ,
So in applications it happends a lot that you would have a sidenav with a list of items in them right. Usually these are links to pages, but in webapps they could be used to select a component on a page in a page-build-system for example.
Now such cases it is nice to have some kind of .active class + styling on a list-item to indicate that that list-item has been selected in the list and is currently active/selected.
Its a bit like the Activated state in the contact chips list where the Activated contact is highlighted.

[pierresh]

Yes, that would be very useful :+1: , thanks!

[beyondsanity]

I've been searching for the same feature, it would be really useful

[timbrown81]

+1 on need

[darkmavis1980]

+1

[richardliebmann]

+1

[tex0l]

+1

[topherfangio]

I am not sure that this is a core feature of the list item itself. Particularly, I'm not seeing how anything we do would be easier than developers using the existing ng-class directive to apply the active class when they need it.

I guess what I'm saying is: I don't think Angular Material can always _know_ when _your_ app wants something selected.

If you can come up with some common usages, we will consider it, but it seems like you may want a higher-level component/directive that knows about how your application operates.

[darkmavis1980]

The problem of using just the ng-class is it's rather hard to override the css behaviour of the md-list-item, I tried as a first option (I simply needed to set a background colour), but it was giving me odd behaviours, and behaving differently on Chrome and Firefox

[joerideg]

Ng material should only define some styling under a md-listitem-active class (or similar). We can then add this class to the list item when we see fit.

[topherfangio]

@joerideg Since there aren't any styles provided by the spec, and the fact that you can add your own custom styles/active class, I don't see how this would really be beneficial since we'd basically be guessing at what you want the active class to look like.

@darkmavis1980 What issues were you having? This definitely seems like something we might be able to address to make it easier to add your own active class.

[OhDavit]

As I have just started to do some front end, not sure how achive this for md-list-item. But as a mobile developer can say it would be very weird that such kind of feature is missing.

[joerideg]

Hey @topherfangio,
See here and here for an example of what seems to be an active list item. It is true it is not mentioned specificly but the visuals show it.

[joerideg]

More examples at http://www.google.com/design/spec/patterns/navigation.html
Specifically http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-content under "Selection state" header

[topherfangio]

@joerideg Thanks for the additional pointers.

@dalu Here is a quick Codepen that I put together to demonstrate how to do it: http://codepen.io/topherfangio/pen/EKQELJ?editors=0100

If you want to also change/remove the grey background on hover, you can uncomment the CSS at the top. I'll grant that this is definitely a bit ugly to have to add and we can perhaps make a fix for this, but otherwise, it seems to do what you want by very simply adding the active class.

Can you guys fork the above Codepen with some examples of what you're trying to do so that we can look at all of your needs? As I said, I'm not opposed to adding this, I just want to make sure we do something that's actually useful :smile:

For instance, would you want to be able to do something like md-primary, md-accent, md-warn to change the text color? What about the background color?

If we can come up with some common use-cases, I'll see about creating a PR.

[joerideg]

Ill have a look!

[topherfangio]

@dalu I'm not sure about your topnav issue (if you can post a Codepen in a new issue we can take a look), but I definitely see your issue/frustration with trying to use ui-sref. I'm going to talk to the team and see how we might be able to address this. Off the top of my head, it seems like might want to provide a custom <nav-list> component or something that can handle these situations better.

[joerideg]

@topherfangio I havent had time yet to set up some examples but hope to do so this weeked. Your idea of adding md-primary, md-accent or ms-warn styles on a listitem sounds good and workable though. Cheers.

[maxim-danilov]

temporary resolve with ng-class:
<md-list-item ng-repeat="title in titles" ng-class="title.id == note.id ? 'active' : false">

[gerardcarbo]

Or just use 'ui-sref-active' directive:

<md-list-item ng-repeat="item in app.menu" ui-sref="{{item.state}}" ui-sref-active="item-menu-active">

[gerardcarbo]

Or using md-colors:

<md-list-item ng-repeat="item in app.menu" ui-sref="{{item.state}}" 
        md-colors="{background: ($ctrl.isActive(item.state) ? 'primary' : 'grey-A100')}">

and in controller (in TS):

   isActive(state) {
        return this.$state.current.name.includes(state);
   }

[sajjad-shirazy]

<md-list-item ng-repeat="item in vm.items" ng-click="vm.selectedItem = item;"
     ng-class="vm.selectedItem == item ? 'active':false">

and

md-list-item {

        transition: border-width 0.1s ease-in-out;
        &.active{
            border-right: 4px solid #d84315;
            background-color: rgba(0, 0, 0, 0.03);
        }

    }

[topherfangio]

With all of these valid solutions, I don't think we need to add anything else? If someone can give a specific example, we will reconsider and reopen.

[joerideg]

Adding a class and styling yourself was never the issue. Thats out of the box with angular.

Technically this issue still has not been solved because md-primary, md-accent and md-warn do not work on a list item.

The request was to provide some styling on a md-list-item-active class or similar in the angular material framework following the specs as provided in the links I posted above.

It would basicly make this workaround a lot better (example using ui router):
from

<md-list-item md-colors="{background: ($ctrl.isActive() ? 'primary' : 'grey-A100')}">
<!-- and then some controller who checks the active state via $state -->

or

<md-list-item ui-sref-active="active">
<!-- and then some custom styling on md-list-item.active -->

to

<md-list-item ui-sref-active="md-list-item-active">

Where .md-list-item-active adds 'active' styling per the spec, changable by adding md-primary, md-accent or md-warn classes.

But I guess the workaround, although not as great, is doable.

[Nextsun-Limited]

routerLinkActive is the solution in the last angular version:




documentation: https://angular.io/api/router/RouterLinkActive