Binding model dynamically in angular2

Question

I want to bind modal dynamically in Angular2. Here is my code

<div *ngFor="let interest of interest_data;" class="row">
    <a class="btn btn-xs btn-link" data-toggle="modal" data-target="#{{interest.id}}">
       <i class="fa fa-pencil"></i>
    </a>
</div>

and the target modal element is as below

<div *ngFor="let interest of interest_data;">
    <div class="modal fade" id="interest.id"  tabindex="-1" role="dialog"
    aria-labelledby="modalLabel" aria-hidden="true">
    </div>
</div> 

Its not working . What is the proper way of doing it ?

Answer 1

Try using [attr.data-target] and [attr.id]. I think you want to do something like this:

<div *ngFor="let interest of interest_data;">

  <div>
    <a class="btn btn-xs btn-link" data-toggle="modal" [attr.data-target]="'#' + interest.id">
      open modal
      <i class="fa fa-pencil"></i>
    </a>
  </div>

  <div class="modal fade" [attr.id]="interest.id" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        modal data
      </div>
    </div>
  </div>

</div>

Make sure to include JQuery and bootstrap.js.

Cheers