Angular2 + MaterialDesignLite: динамическое добавление свойства html

Я работаю с Angular2 и MaterialDesignLite и хочу создать такое же меню:

<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
    for="demo-menu-lower-left">
  <li class="mdl-menu__item">Some Action</li>
  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
  <li disabled class="mdl-menu__item">Disabled Action</li>
  <li class="mdl-menu__item">Yet Another Action</li>
</ul>

Давайте сосредоточимся на свойстве disabled. Я хочу, чтобы он появлялся всякий раз, когда я хочу отключить пункт меню, оставив его видимым. Вот чего я до сих пор добился:

<div class="mdl-menu__container-menu">
    <div class="mdl-menu__outline mdl-menu--bottom-right"></div>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" [attr.for]="id">
        <li [attr.disabled]="item.disabled" *ngFor="#item of items" class="mdl-menu__item" (click)="onClick($event, item.id)">{{item.text}}</li>
    </ul>
</div>

К сожалению, свойство MDL <li> disabled не работает с логическим значением (disabled = "true" или disabled = "false" ведет себя так же, как само отключено) и как < strong> disabled не является собственным свойством <li>, Angular2 не позволяет мне устанавливать его как [disabled]="item.disabled".

Есть ли способ установить само свойство disabled при определенном условии с помощью директивы?

Есть ли способ условно установить свойство (без присвоенного значения) или директиву в компоненте динамически?

Заранее спасибо за помощь!!