0

Estoy tratando de crear un modal para cada uno de los datos enviados en el siguiente ciclo:

 <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">&times;</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>

Sin embargo, aunque el botón que ejecuta el modal y el modal, terminan recibiendo la misma id:

Botón para ejecutar el modal con el atributo data-target:

<button _ngcontent-eoq-c127="" type="button" data-toggle="modal" class="btn btn-primary"
 data-target="#62dee4261fa4460bf07a6e6e"> Launch demo modal </button>

Contenido del modal con el id igual al data target mencionado:

<div _ngcontent-eoq-c127="" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" class="modal fade" id="62dee4261fa4460bf07a6e6e">

El modal directamente NO se abre, NO ejecuta en absoluto:

¿Qué podría ser? Por qué mi modal no se abre? He revisado bien las librerías e intentar abrirlo cambiando el datatarget y el ID por palabras simples como "Modal" y en ese caso funciona a la perfección ¡¿Que está mal?!

8
  • yo tube esta necesidad en hace mucho tiempo en BS3 y hay dos caminos:
    – user46896
    el 24 ago. 2022 a las 20:57
  • 1
    A) crea una plantilla y cada vez que necesites un modal dinamico le pasas los datos: titulo, contenido, botones, id, incluso el Z-index si quieres que se vea sobre otro modal
    – user46896
    el 24 ago. 2022 a las 20:57
  • B) Armar todo el html del Modal incluyendo los datos que te mencione anteriormente y agregandolo al DOM...
    – user46896
    el 24 ago. 2022 a las 20:58
  • No existe algo ya listo para usar...
    – user46896
    el 24 ago. 2022 a las 20:58
  • Esta linkeado el script de bootstrap que permite hacer esas interacciones? (aunque no creo que sea una buena práctica ya que estás usando Angular, en teoría deberías mostrar el modal con Angular) el 24 ago. 2022 a las 21:00

1 respuesta 1

1

Has intentado utilizar el modal a modo de componente? me parece una mejor práctica que la manera en la que estas tratando de hacerlo ya que estas usando Angular, aquí puedes ver como funcionaría.

Estas son las partes claves para que te funcione.

Creas un modal component aparte:

<!-- modal.component.html -->
<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ data.title }}</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
          (click)="onCloseModal()"
        ></button>
      </div>
      <div class="modal-body">
        <p>{{ data.content }}</p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-secondary"
          data-bs-dismiss="modal"
          (click)="onCloseModal()"
        >
          Close
        </button>
        <button type="button" class="btn btn-primary" (click)="onCloseModal()">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>

La clase .modal viene display: none; por defecto así que con CSS la sobrescribes para que se muestre:

// modal.component.css
.modal {
  display: block;
}

La lógica del componente es sencilla; recibe el input data para mostrar la información dinámica que le pases y emite el evento closeModal cuando le das a alguno de los botones para cerrar:

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css'],
})
export class ModalComponent {
  @Input() data: any;
  @Output() closeModal = new EventEmitter();

  onCloseModal(): void {
    this.closeModal.emit();
  }
}

Para utilizarla simplemente la muestras con un ngIf:

...
<tbody>
  <ng-container *ngFor="let item of data">
    <tr>
      <td>{{ item.id }}</td>
      <td>{{ item.title }}</td>
      <td><a class="link" (click)="setSelectedItem(item)">Open</a></td>
    </tr>
  </ng-container>
</tbody>

<!-- muestre el modal siempre y cuando haya un selectedItem: -->
<app-modal
  *ngIf="selectedItem"
  [data]="selectedItem"
  (closeModal)="setSelectedItem(null)"
></app-modal>

Esta es la lógica del componente que la usa:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  data = [...];
  selectedItem = null;

  setSelectedItem(item) {
    this.selectedItem = item;
  }
}
1
  • ¡Excelente respuesta! Ha funcionado estupendo en mi programa. Agregué un background-color: rgba(0,0,0, 0.5) !important; al modal debido a que como es un modal en visibilidad block, no utiliza el background que le colocaba bootstrap. el 25 ago. 2022 a las 16:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.