1

I'm working with Bootstrap 5's Modal component and wanted to implement the following code from the documentation into TypeScript which I am new to instead of JavaScript.

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Example originates from here

The hurdle I can't seem to get around is the property relatedTarget not being defined since it is a custom property from the Bootstrap code. I'm not sure if there is an appropriate interface I can use and the compiler will recognize (maybe there's a package that does that already), or if I need to make a global declaration to avoid the issue beforehand.

macintosh
  • 98
  • 8

0 Answers0