CODEWITHSUNDEEP
angularngx-bootstrap
Taras Ilyin
Taras Ilyin

Reputation: 101

How to apply an angular directive to the div with .modal-dialog class?

The problem that by documentation my modal template contain .modal-header, .modal-body and .modal-footer elements. I can't define whole modal template, since ngx modal automatically wraps the content into .modal-content>.modal-dialog.

I tried to apply directive with class selector, but this is also not working, since I think ngx module doesn't know anything about my module where the directive declared and exported.

I looking for may be some options to be able to define whole template of modal and other way to apply directive to the .modal-dialog level.

To be more specific I have create directive to make the modal draggable and I need to apply it exactly to the .modal-dialog level

Thank you for you help

Upvotes: 0

Views: 412

Answers (1)

Joshua Chan
Joshua Chan

Reputation: 1847

Your best bet should be using the directive ngx-bootstrap provide.

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Static modal</button>

<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
    tabindex="-1" role="dialog" aria-labelledby="dialog-static-name">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-static-name" class="modal-title pull-left">Static modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="staticModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        This is static modal, backdrop click will not close it.
        Click <b>&times;</b> to close modal.
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions