Components: md-list-item disabled property

[theunreal]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Angular material2 list [disabled] item. An option to bind [disabled] to md-list-item in order to disable it (same as how the button disabled property works).

What is the current behavior?

no [disabled] property binding with md-list-item

What is the use-case or motivation for changing an existing behavior?

A list is not a button, but used for navigation and accessing data. [disabled] property can be very useful in such cases.

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

All

[jelbourn]

In general, disabled should live on the appropriate <button> / <a> elements, but it might make sense to have a style for disabled list items.

cc @kara

[code-tree]

This would be nice to have.

My use case: settings page, using md-list for settings, and some of which may be disabled.

[moneal]

This makes a lot of sense to me. I have a md-nav-list and being able to disable some options depending on account settings seems appropriate. I think this would function the same as md-menu.

[mrburrito]

+1

I'm using md-nav-list as a menu and need to be able to disable some or all of the list based on application state. I tried using md-button as the list items, but it doesn't render properly.

[WaterBleu]

in #3624 says that not putting the list-item to be disabled, yet this is still open..
what is the status on this?

[william-lohan]

I understand that the native anchor element has no disabled attribute but its hard to follow why a[mat-button] and a[mat-menu-item] use disabled input but a[mat-list-item] does not.

[cmd-johnson]

My workaround for now is to handle this through CSS:

a[mat-list-item].disabled {
  opacity: 0.2;
  pointer-events: none;
}

<mat-nav-list>
  <a mat-list-item>Clickable</a>
  <a mat-list-item class="disabled">Disabled</a>
</mat-nav-list>

It's not the same as a disabled attribute, but good enough for my use case.

[jelbourn]

Closing this since mat-action-list exists now which can have disable items

[william-lohan]

Even mat-action-list list doesn't seem to have disabled style

<mat-action-list>
  <button mat-list-item (click)="save()" disabled> Save </button>
  <button mat-list-item (click)="undo()"> Undo </button>
</mat-action-list>

I'm using this

@Directive({
  selector: 'button[mat-list-item]',
  host: {
    '[class.mat-list-item-disabled]': 'disabled',
    '[attr.aria-disabled]': 'disabled',
    '[attr.disabled]': 'disabled || null'
  },
  inputs: ['disabled']
})
export class ListItemDisabledButtonStylerDirective extends _ListItemDisabledStylerDirectiveMixinBase implements CanDisable { }

to add selection list's mat-list-item-disabled

and for mat-nav-list

@Directive({
  selector: 'mat-list-item, a[mat-list-item]',
  host: {
    '[class.mat-list-item-disabled]': 'disabled',
    '[attr.aria-disabled]': 'disabled'
  },
  inputs: ['disabled']
})
export class ListItemDisabledDirective extends _ListItemDisabledStylerDirectiveMixinBase implements CanDisable, OnChanges {

  constructor(
    @Optional() private matListItem?: MatListItem
  ) {
    super();
  }

  public ngOnChanges(changes: SimpleChanges): void {
    if (changes['disabled'] && this.matListItem) { // TODO matListItem null ?
      this.matListItem.disableRipple = this.disabled;
    }
  }

  @HostListener('click', ['$event'])
  public clickHandler(event: Event): boolean {
    if (this.disabled) {
      event.preventDefault();
      return false;
    }
    return true;
  }

}

https://stackblitz.com/edit/components-issue-th1faq-mat-list-item-disabled?file=app%2Flist-item-disabled-styler.directive.ts

[jelbourn]

@william-lohan good catch, I filed #17574

[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._}