title: Javascript Angular Insert variable in data-target as id
body: <p>I am using Angular4 and I have some data value that I want to insert dynamically as an id in data-target.</p>
  
  <p>What I do this is works fine:</p>
  
  <pre><code>&lt;a href="#" data-toggle="modal" data-target="#myid"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>But when I do this:</p>
  
  <pre><code>&lt;a href="#" data-toggle="modal" data-target="#{{item.id}}"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>For some reason the line above is converting to this:</p>
  
  <pre><code>&lt;a href="#" data-toggle="modal" target="#{{item.id}}"&gt;Edit&lt;/a&gt;
  </code></pre>
  
  <p>So, no longer data target by turns to target.</p>
  
  <p>Why? and how can I fix this?</p>