title: How to correctly bind values of id and data-target with angular2+?
body: <p>Am trying to bind values of id and data-target to show bootstrap modal for each item in ngFor:</p>
  
  <pre><code>&lt;div *ngFor="let item of jobsList; let i = index" class="card text-center"&gt;
    &lt;div class="card-header"&gt;
      {{item.name}}
    &lt;/div&gt;
    &lt;div class="card-body"&gt;
      &lt;p [innerHTML]="item.description" class="card-text"&gt;&lt;/p&gt;
      &lt;button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#' + i"&gt;
        Launch demo modal
      &lt;/button&gt;
      &lt;div class="modal fade" [attr.id]="i" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"&gt;
        &lt;div class="modal-dialog modal-dialog-scrollable" role="document"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;h5 class="modal-title" id="exampleModalScrollableTitle" [innerHTML]="item.name"&gt;&lt;/h5&gt;
  </code></pre>
  
  <p>the above code doesn't work, why?</p>