title: Handling bootstrap4 modals in Dart
body: <p>I need to call bootstrap modals from Dart code and this is what I've tried (using the <code>js</code> library):</p>
  
  <pre><code>@JS('jQuery')
  class jQuery {
  
    @JS()
    jQuery(obj);
  
    @JS('modal')
    external dynamic modal(func);
  }
  
  class Modal extends jQuery {
  
    Modal(obj) : super(obj);
  
    dynamic toggle() =&gt; super.modal('toggle');
    dynamic show() =&gt; super.modal('show');
    dynamic hide() =&gt; super.modal('hide');
    dynamic handleUpdate() =&gt; super.modal('handleUpdate');
    dynamic dispose() =&gt; super.modal('dispose');
  
  }
  </code></pre>
  
  <p>in that code if I use the jQuery class directly I get no issues (<code>jQuery.modal('show')</code>) but if I use the <code>Modal</code> methods i.e.:</p>
  
  <pre><code>Modal modal = Modal('#myModal');
  modal.toggle();
  </code></pre>
  
  <p>I will get a <code>TypeError: Cannot read property 'call' of undefined (NullError)</code> .</p>
  
  <p>The javascript the code is <code>jQuery('#myModal').modal(func)</code></p>
  
  <p>My second issue is how to hook a custom event for example: <code>show.bs.modal</code> in jQuery I would use <code>.on(...)</code> but in Dart I have no clue, I've used <code>element.addEventListener('show.bs.modal', onModalShown)</code> but it isn't triggered and I don't get any errors.</p>