title: Pug (formerly Jade) Variables Not Working (Interpolating) Correctly Inside Anchor Href
body: <p>I'm playing around with Node and Express and I'm using the Pug (formerly Jade) templating engine to render my html. Everything has been working fine up until I started trying to inject variables into the <code>href</code> of my anchor links. Whats odd is that if I change my Express app <code>view engine</code> to <code>jade</code> then things start working as expected.</p>
  
  <p>Based upon <a href="https://github.com/pugjs/pug/issues/1028" rel="noreferrer">other articles</a> I've read the issue appears to be an interpolation issue, however I can't seem to find a resource or documentation that shows how to correctly fix this issue.</p>
  
  <p>Ex.</p>
  
  <p>I'm pulling in data from a <code>rooms</code> json array and then using a <code>for</code> loop to cycle through each array element and output the data for each room. Using <code>jade</code> the following works. </p>
  
  <pre><code>table.table.table-striped
    thead
      tr
        th Name
        th Id
    tbody
      each room in rooms
        tr
          td(style="width: 50px;")
            a(href!="/admin/rooms/delete/#{room.id}") Delete
          td #{allTitleCase(room.name)}
          td #{room.id}
  </code></pre>
  
  <p>Using <code>pug</code> the above does NOT work correctly. Specifically the <code>a(href='/admin/rooms/delete/#{room.id}') Delete</code> link doesn't work correctly. Instead of injecting the room id into the link href, it literally outputs <em>#{room.id}</em> as the end part the <code>href</code> link.</p>
  
  <p>Any ideas how to fix this in <code>pug</code>? </p>
  
  <p>Note that I've tried all of the following using <code>pug</code> but none of these options have worked.</p>
  
  <ul>
  <li><code>a(href="/admin/rooms/delete/#{room.id}") Delete</code></li>
  <li><code>a(href!="/admin/rooms/delete/#{room.id}") Delete</code></li>
  </ul>