0

I am using a modal component and to improve its performance and make it more stable i want to only append the modal to the body of the page as soon as it should be opened.

The Modal is using <ng-content></ng-content> which means a modal looks something like this:

<app-modal [id]="'delete-modal-'+entry?.uuid"
           size="small">
  <ng-container slot="title">
    Modal Title
  </ng-container>
  <ng-container slot="content">
    Modal Content with some Inputs
  </ng-container>
  <ng-container slot="actions">
    <div class="modal-actions-row">
      <app-custom-button>
        Close
      </app-custom-button>
      <app-custom-button>
         Save
      </app-custom-button>
    </div>
  </ng-container>
</app-modal>

as Mentioned in this Thread there are several possibilities to access the ng-content inside of the modal component, but they all require the ng-content to be in the template. I would like to use the ng-content together with a inner modal component which will be appended to the of the Page as soon as its opened.

Are there solutions to achive something like this while still using the same syntax for the app-modal component?

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Jeremias Nater
  • 650
  • 3
  • 18
  • 1
    Why not use `*ngIf` ? This will load the modal only when a particular condition becomes true – Owen Kelvin Oct 16 '20 at 10:50
  • Using ngIf would require me to actually place the tag at the end of the body if i want it to be there. But the modal is used in lots of my components. Another thing to note is that if you are wrapping an with lets say , the components that are actually in the template which is not loaded because of the *ngIf are still initialized. I am currently trying to initialize and then load the modal with its ng-content into the dom only when the action "openModal" is fired. – Jeremias Nater Oct 16 '20 at 11:39

0 Answers0