Ionic 4 with AngularJS 1.7.2 - how to load a directive into a modal?

Ionic Framework
1

I would like to pop a modal in Ionic 4 with AngularJS (why there no category for Ionic 4 in this forum btw? I posted this on Ionic at general) and I want to put a directive inside the modal.

However Ionic 4 doesn’t allow to pop a modal on any HTML ID/class or attribute, where I can just lay a directive, and therefore I don’t have how to inject the data of the remote directive to the modal.

For example this is the Ionic 4 docs about modal for plain JS:

customElements.define('modal-page', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
<ion-header>
  <ion-toolbar>
    <ion-title>Super Modal</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  Content
</ion-content>`;
  }
});

async function presentModal() {
  // initialize controller
  const modalController = document.querySelector('ion-modal-controller');
  await modalController.componentOnReady();

  // present the modal
  const modalElement = await modalController.create({
    component: 'modal-page'
  });
  await modalElement.present();
}

As you can see, they register a new component with the customElements.define which I really don’t know what it is - they don’t describe on it anywhere.

But the problem in here is that they fetch HTML content - however I need to fetch the whole directive with his JS mechanism.

My questions:

  1. How can I do that? (based on AngularJS 1.7.2 directives).
  2. What is the customElements.define in Ionic - where can I find any explanation about this?