Can the Child Modal be used Directly [feature/question]

[360disrupt]

In the examples is shown that you can create a child component, and define a template for the child component. I want to define the whole modal as a component for portability. If I follow the approach my modal header, body, footer are nested into the body.

E.g. my template is:

<section>
  <div class="modal-header">
    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <h2 class="modal-title" id="modal-title">My title</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <p>Header text</p>
      </div>
    </div>


  </div>
  <div class="modal-body" id="modal-body">
    <div class="row">
      <div class="col-xs-12">
        <h4>Body Heading</h4>
        <p>Body text.</p>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <div class="visible">
      <div class="row">
        <div class="col-xs-12">
          <!--<md-progress-linear md-mode="query"></md-progress-linear>-->
          <div class="bottom-block">
            <span>Footer text.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

With the modal component:

import { IModalDialog, IModalDialogOptions } from 'ngx-modal-dialog';
import { Component, ComponentRef } from '@angular/core';

@Component({
  selector: 'app-custom-modal',
  templateUrl: './reboot-modal.component.html',
  styleUrls: ['./reboot-modal.component.scss']
})
export class RebootModalComponent implements IModalDialog {
  parentInfo: string;
  dialogInit(reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<string>>) {
    this.parentInfo = options.data;
  }
}

And opening the modal in another component:

  openRebootModal(parentSelector?) {
    this.modalDialogService.openDialog(this.viewContainer, {
      childComponent: RebootModalComponent,
      settings: {
        closeButtonClass: 'close theme-icon-close'
      }
    });
  }

I end up with having my template in the modal-body:

<div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body">
            <my-template>
                <div class="modal-header"></div>
                <div class="modal-body"></div>
                <div class="modal-footer"></div>
            </my-template>
        </div>
</div>