0

I am using Angular2 RC1 version and Material Design Lite.
I am going to implement an independent grid component. A custom property called Id is used to identify the component.

export class GridComponent {

  @Input() public id: string;

}

I am facing the problem when I bind Id property to the 'for' attribute of UL tag. Like below code snippet:

<button class="mdl-button" id="{{id}}-viewColumn">
    <i class="material-icons">view_column</i>
</button>

<ul class="mdl-menu" for="{{id}}-viewColumn">
    <li *ngFor="xxx">
    </li>
</ul>

Then error says that 'Can't bind to 'for' since it isn't a known native property'.
But I have to use 'UL' tag. Above 'UL' code is following the https://getmdl.io/components/#menus-section.
I am wondering that how would you handle this case?
Thank you in advance.

Edmond Wang
  • 1,687
  • 13
  • 27
  • 2
    `for` is a property of ` – ps2goat Jun 15 '16 at 01:40
  • @ps2goat, thanks for your reply. For I am using Material Design Lite as UI framework, I think I have to follow the code sample provided by https://getmdl.io/components/#menus-section. – Edmond Wang Jun 15 '16 at 02:02
  • Seems limited by MDL here, is that right that I have to use 'UL' tag? – Edmond Wang Jun 15 '16 at 02:09

2 Answers2

1

there is no for property on the native element. can you just add label inside ul ? <label [attr.for]="{{id}}-viewColumn">.

chourn solidet
  • 300
  • 5
  • 19
  • Yes. As we all know, property 'for' is usually used on 'label'. But in this case, I think I have to use 'UL'. Please kindly take a look at https://getmdl.io/components/#menus-section. Seems limited by MDL here. – Edmond Wang Jun 15 '16 at 01:59
1

It obviously has to be added as an attribute instead of as property.

Use 

<ul [attr.for]="id"

or

<ul attr.for="{{id}}"
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • thanks for your reply.
      – Edmond Wang Jun 15 '16 at 04:40
    • 1
      Both do the same. `{{id}}` binds the stringified value of `id` but attributes can hold strings only anyway, therefore `[attr.for]="id"` has the same end result. If you bind to a property and `id` is not a string, then `for="{{id}}"` and `[for]="id"` differ because only the later passes the value unchanged. – Günter Zöchbauer Jun 15 '16 at 04:43