Angular2 + MaterialDesignLite: Add html property dynamically


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

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.text}}</li>

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


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"



Answered By – Günter Zöchbauer

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.