ng-bootstrap modal opens component, but places html-selector

Question

I am using ng-bootstrap within my angular 4 application. With ngbModal I open a modal. The modal content is placed in a separate component: selector: 'my-modal-component'.

Component one (click to open modal in the component.ts):

this.spModalService.open(MyModalComponent, 'sm');

Component two (the content of the modal):

<div class="modal-header"> (..) </div>
<div class="modal-body"> (..) </div>
<div class="modal-footer"> (..) </div>

So far so good. The class .modal-content gets the calsses d-flex and flex-column to make sure the .modal-header, -body and -footer know what to do (divide the height vertically).

But: because I am giving ngbModal a component as the content of the modal, it places a selector-tag in the HTML:

<div class="modal-content">
    <my-modal-component>
        <div class="modal-header"> (..) </div>
        <div class="modal-body"> (..) </div>
        <div class="modal-footer"> (..) </div>
    </my-modal-component>
</div>

Because of this HTML-selector, my flexbox styling isn't working anymore, because the .modal-header, -body and -footer are no longer direct children of the .modal-content class.

Does anyone know if the selector can be ignored?

EDIT: This is my desired result:

<div class="modal-content">
    <div class="modal-header"> (...) </div>
    <div class="modal-body"> (...) </div>
    <div class="modal-footer"> (...) </div>
</div>

I've been googling and reading like crazy, but have not found anyone with the same problem and question.

Answer 1

try loading your scss pages in dirent way like : import 'style-loader!./your-scss-file-name.scss';