<p dir="auto">I have a <code class="notranslate">&lt;side-menu&gt;</code> component in 2.0.0-alpha.13. Currently, to set the <code class="notranslate">open</code> class on the side menu to show/hide it, I have to manually manipulate the dom element:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component, Template, NgElement} from 'angular2/angular2';
@Component({
  selector: 'side-menu'
})
@Template({
  inline: `&lt;div class=&quot;scroll-area&quot;&gt;
    &lt;content&gt;&lt;/content&gt;
  &lt;/div&gt;`
})
class SideMenu {
  constructor(@NgElement() el: NgElement) {
    this.element = el;
  }
  //drag logic ommitted...
  setOpen(isOpen) {
    this.isOpen = isOpen;
    this.element.domElement.classList[isOpen ? 'add' : 'remove']('open');    
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-v">Component</span><span class="pl-kos">,</span> <span class="pl-v">Template</span><span class="pl-kos">,</span> <span class="pl-v">NgElement</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>
@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'side-menu'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-v">Template</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">inline</span>: <span class="pl-s">`&lt;div class="scroll-area"&gt;</span>
<span class="pl-s">    &lt;content&gt;&lt;/content&gt;</span>
<span class="pl-s">  &lt;/div&gt;`</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-v">SideMenu</span> <span class="pl-kos">{</span>
  <span class="pl-c1">constructor</span><span class="pl-kos">(</span>@<span class="pl-v">NgElement</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">el</span>: <span class="pl-c1">NgElement</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">element</span> <span class="pl-c1">=</span> <span class="pl-c1">el</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-c">//drag logic ommitted...</span>
  <span class="pl-en">setOpen</span><span class="pl-kos">(</span><span class="pl-s1">isOpen</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">isOpen</span> <span class="pl-c1">=</span> <span class="pl-s1">isOpen</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">element</span><span class="pl-kos">.</span><span class="pl-c1">domElement</span><span class="pl-kos">.</span><span class="pl-c1">classList</span><span class="pl-kos">[</span><span class="pl-s1">isOpen</span> ? <span class="pl-s">'add'</span> : <span class="pl-s">'remove'</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-s">'open'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>    
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">I'd like to be able to setup a <code class="notranslate">[class.open]="isOpen"</code> binding on my component's element instead of having to do this.</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a> suggested injecting <code class="notranslate">@PropertySetter('class.open') setter: Function</code> into the constructor, but that errors when used because the actual <code class="notranslate">setter</code> function tries to set <code class="notranslate">domElement.class.open</code>. And <code class="notranslate">domElement.class</code> does not exist.</p>
<p dir="auto">I read the parent child routing in angular2 docs. It is pretty good, but my requirement is to create multilevel routes using angular2. And loading of the component is completely Lazy, means when we require it then only load the components and routes so i used AsyncRoute. So scenario is given below:</p>
<p dir="auto">TopLinks: Home | Admin<br>
Admin ChildLinks: SecurityMgmt | SystemConfig</p>
<p dir="auto">Where Home &amp; SecurityMgmt are the default routes, means when user clicks on Admin link or specify the correct url (i.e. <a href="http://localhost:8080/myapp/#/admin/securitymgmt" rel="nofollow">http://localhost:8080/myapp/#/admin/securitymgmt</a>) then Admin &amp; SecurityMgmt links should be selected and security management page should be displayed under the child links.</p>
<p dir="auto">Along with that when user clicks on Admin link then only the Admin.ts and Admin.html files should be loaded. Since SecurityMgmt link is the default so it should also select SecurityMgmt link and load SecurityMgmt.ts and SecurityMgmt.html files. This same behavior should be applicable if user specify the correct url on web browser i.e.</p>
<ol dir="auto">
<li><a href="http://localhost:8080/myapp/#/admin" rel="nofollow">http://localhost:8080/myapp/#/admin</a> - After using this URL router should convert this to <a href="http://localhost:8080/myapp/#/admin/securitymgmt" rel="nofollow">http://localhost:8080/myapp/#/admin/securitymgmt</a> because of the default behavior and display the same page as specified using <a href="http://localhost:8080/myapp/#/admin/securitymgmt" rel="nofollow">http://localhost:8080/myapp/#/admin/securitymgmt</a> url.</li>
<li><a href="http://localhost:8080/myapp/#/admin/securitymgmt" rel="nofollow">http://localhost:8080/myapp/#/admin/securitymgmt</a></li>
</ol>
<p dir="auto">I just want to know how can we define this kind of routing using angular2 async routing.</p>
<p dir="auto">I did my own way using angular2 Async routing, it is working but my solution is not so clean because i am duplicating the route configuration(As AsyncRoute does not provide all these features). If anybody have good solution to that, please share the same.<br>
Thanks</p>