@Nephren wrote:
I have a question about best practice about ionic component and custom component.
For example with ION-MODAL:
_the “Usage” section specify that:
<body> <ion-modal-controller></ion-modal-controller> </body>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(); }it’s cool for a modal with few complexity, but in my case I decided to create a separate and custom component with its own tag.
I get it by its ID and affect the “component” attribute in the create function with my custom element.
it look like that:<body> <ion-modal-controller> <my-custom-modal id="my-custom-modal" :props1="toto" @close-modal="closeModal"> </my-custom-modal> </ion-modal-controller> </body>presentModal() { const modalController = document.querySelector('ion-modal-controller'); const myCustomModal= document.getElementById('my-custom-modal'); modalController.componentOnReady() .then(() => { modalController.create({ component: myCustomModal }) .then((modalElement) => { modalElement.present(); }); }); }My question is there.
I don’t know where i must put my custom component tag…
In the ion-modal-controller tag, like that my custom tag can be displayed only when I trigger the ion-modal-controller or outside the ion-modal-controller tag ?
Posts: 1
Participants: 1