Как применить угловую директиву к div с классом .modal-dialog?

Question

Проблема в том, что по документации мой модальный шаблон содержит элементы .modal-header, .modal-body и .modal-footer.Я не могу определить весь модальный шаблон, так как модал ngx автоматически оборачивает содержимое в .modal-content> .modal-dialog.

Я попытался применить директиву с селектором класса, но это также не работает, так какЯ думаю, что модуль ngx ничего не знает о моем модуле, где директива объявлена ​​и экспортирована.

Я ищу некоторые варианты, чтобы иметь возможность определить целый шаблон модального и другого способа применения директивы к уровню .modal-dialog.

Чтобы быть более конкретным, у меня есть директива createчтобы сделать модальный перетаскиваемый и мне нужно применить его точно к уровню .modal-dialog

Спасибо за вашу помощь

Answer 1

Лучше всего использовать директиву ngx-bootstrap.

<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>