ngFor on table rows with clickable modal windows. How to do that modal windows with ng-bootstrap .open() function?

Question

I am trying to make a table, that will show venues in the city. I am using a *ngFor loop to display the venues (table rows). After clicking on the table row, the modal window with more informations should appear. I am using a ng-bootstrap and loading informations about venues form json.

My question to you is - what is the best way (and how to implement) of creating the modal window for each of the venue (table row). I tried to put modalWindow inside the ng-container and assign it the unique id, but it did not work out, because I can pass to the ng-bootstrap function .open() only a TemplateRef or Component.

So apart from solution above, I have an idea how to do this. I think that the best way would be to create a template of the modal window (to avoid creating almost the same modal window 100x times) and then pass the values (name, description, etc.) to it dynamically regarding the venue, that the user clicked on. But I do not really know how to implement this.

Right now I have this piece of code, that is generating the table rows:

<ng-container *ngFor="let venue of venues">
  <tr>
    <td>{{ venue.title }}</td>
    <td>{{ venue.location.city | titlecase }}</td>
    <td>{{ venue.location.zipcode }}</td>
    <td>{{ venue.location.adress }}</td>
    <td>{{ venue.dates.startdate }}</td>
    <td><button class="btn btn-outline-dark" (click)="modalService.open();">Details</button></td>
  </tr>
</ng-container>

and this sample modal window, that I want to display. Please note, that the values inside the modal window should vary, depending on the clicked venue. Code for sample modal window:

  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ venue.title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>{{venue.description}}</p>
        </div>
      </div>
    </div>
  </div>

Could you please help me, how to make a modal windows for each venue in a proper way? Thank you! :)

Answer 1

As you said, you need to create a compenent for the modal, that will receive a venue (either you pass an id and fetch it from the modal or you can simply pass the full venue object).

Inside your component that display the venues, create a function that take the venue which will be called on the row button click

<td><button class="btn btn-outline-dark" (click)="openVenueModal(venue);">Details</button></td>

Then inside your component create the above function :

function openVenueModal(venue: Venue) {
  this.bsModalService.show(modalComponent, {
    {
      venue: venue
    }
  });
}

modalComponent is a ref to modal component html file.

Then your modal component will display it as you show. It will have a venue property that will be filled by to modalService.

See ng-bootstrap document to close the modal !

Hope it helps