Angular2 + MaterialDesignLite: Add html property dynamically

Issue

I’m working with Angular2 and MaterialDesignLite and want to achieve a menu just like this one:

<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>

Let’s focus on the disabled property. I want it to appear whenever I want to disable a menu entry, still leaving it visible. This is what I’ve achieved so far:

<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>

Unfortunately, MDL <li> disabled property doesn’t work with a boolean value (disabled=”true” or disabled=”false” behave just like disabled alone itself) and as disabled is not a native property of <li>, Angular2 doesn’t allow me to set it as [disabled]="item.disabled".

Is there any way I can set the disabled property alone itself, upon a specific condition, by using a directive?

Is there any way I can conditionally set a property (without any assigned value) or directive in a component dynamically?

Thanks in advance for your help!!

Solution

I haven’t found a way to get

<li disabled

but adding removing works with

<li [attr.disabled]="item.disabled ? true : null"

which results in

<li disabled="true"

or

<li

Answered By – Günter Zöchbauer

Answer Checked By – Marie Seifert (AngularFixing Admin)