I am trying to create a modal for each of the data sent in the following loop:
<tbody class="font-size-base">
<tr *ngFor="let item of contacto | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
<td>
{{item.cliente}}
<td>
{{item.correo}}
</td>
<td>
{{item.telefono}}
</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal" [attr.data-target]="'#' + item._id">
Launch demo modal
</button>
</td>
<div class="modal fade" id="{{item._id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
However, even though the button that executes the modal and the modal end up receiving the same id:
Button to run the modal with the data-target attribute:
<button _ngcontent-eoq-c127="" type="button" data-toggle="modal" class="btn btn-primary"
data-target="#62dee4261fa4460bf07a6e6e"> Launch demo modal </button>
Content of the modal with the id equal to the mentioned data target:
<div _ngcontent-eoq-c127="" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade" id="62dee4261fa4460bf07a6e6e">
The modal directly does NOT open, it does NOT run at all:
What could it be? Why is my modal not opening? I have checked the libraries well and try to open it by changing the datatarget and the ID for simple words like "Modal" and in that case it works perfectly. What is wrong?!
Have you tried using the modal as a component? It seems to me a better practice than the way you are trying to do it since you are using Angular, here you can see how it would work.
These are the key parts to make it work for you.
You create a separate modal component:
The class
.modal
comesdisplay: none;
by default so with CSS you override it to display:The component logic is simple; receive the input
data
to display the dynamic information you pass to it and emit the eventcloseModal
when you hit one of the buttons to close:To use it simply sample it with a
ngIf
:This is the logic of the component that uses it: