Search code examples
angular2-mdlangular-mdl

Angular2 MDL disabling mdl-menu-item not working

I am trying to disable mdl-menu-item based on condition set by module.

my app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'ca-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  test() {
    return true;
  }
}

my app.component.html

<button mdl-button #btn1="mdlButton" (click)="m1.toggle($event, btn1)" mdl-button-type="raised" mdl-ripple>Options</button>
  <mdl-menu #m1="mdlMenu" mdl-menu-position="top-left">
    <mdl-menu-item mdl-ripple [disabled]="test()">Draw Object</mdl-menu-item>
    <mdl-menu-item mdl-ripple mdl-menu-item-full-bleed-divider>Another Action</mdl-menu-item>
    <mdl-menu-item mdl-ripple disabled>Disabled Action</mdl-menu-item>
    <mdl-menu-item>Yet Another Action</mdl-menu-item>
  </mdl-menu>

At this stage the menu item is never disabled, not sure what i am doing wrong here.

Solution

  • The disabled attribute is a ui only feature in material design lite. e.g. there are only some css rules that change the ui if the disabled attribute is present on an mdl-menu-item. So in your case you can do the following:

    <mdl-menu-item [attr.disabled]="test() ? '' : null">Draw Object</mdl-menu-item>

    The null value removes the attribute. Also you should note that the click event is fired in any case.

    This could be improved but I think I would break existing behavior. I have filed an issue for the next major release to make it more angular like (https://github.com/mseemann/angular2-mdl/issues/797).