title: Jade/Pug with Angular 2 - how to resolve conflict with # syntax?
body: <h2><strong>Jade input</strong></h2>
  
  <pre><code>div(#menu class="ui dropdown icon item")
  </code></pre>
  
  <h2><strong>Html output</strong></h2>
  
  <pre><code>&lt;div #menu="#menu" class="ui dropdown icon item"&gt;
  </code></pre>
  
  <p><strong><em>#menu="#menu"</em></strong> is wrong, the output i was expecting was just <strong><em>#menu</em></strong>.</p>
  
  <pre><code>&lt;div #menu class="ui dropdown icon item"&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>The issue:</strong></p>
  
  <p>Angular's <a href="https://angular.io/docs/ts/latest/guide/template-syntax.html#ref-vars" rel="nofollow">template reference variables</a> are in conflict with jade's <a href="http://jade-lang.com/reference/attributes/" rel="nofollow">#idname syntax</a>.</p>
  
  <p><strong>Version Infomation:</strong></p>
  
  <ul>
  <li>Jade 1.11.0</li>
  <li>Angular 2 rc4</li>
  </ul>