How to bind component id as parent relative path to HTML element inside template
<p>I am using Angular2 RC1 version and Material Design Lite.<br>
I am going to implement an independent grid component.
A custom property called Id is used to identify the component.</p>

<pre><code>export class GridComponent {

  @Input() public id: string;

}
</code></pre>

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

<pre><code>&lt;button class="mdl-button" id="{{id}}-viewColumn"&gt;
    &lt;i class="material-icons"&gt;view_column&lt;/i&gt;
&lt;/button&gt;

&lt;ul class="mdl-menu" for="{{id}}-viewColumn"&gt;
    &lt;li *ngFor="xxx"&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

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