Edmond Wang Edmond Wang - 5 months ago 18
Javascript Question

How to bind component id as parent relative path to HTML element inside template

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.

Answer

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

Use

<ul [attr.for]="id"

or

<ul attr.for="{{id}}"
Comments