Move component to another DOM node using ember-maybe-in-element

Question

I have a use case where I can move a child component to different DOM location within same page/route dynamically.

home.hbs

<div class="container">
  <div class="content">
    <!-- Place where I want to place Child -->
   </div>
</div>
<Parent></Parent>

Parent.hbs

<h1>This is parent component</h1>
<Child></Child>

child.hbs

Hello World

child.js

const mainContainer = document.querySelector('.container .content');
const myElm = this.element.querySelector('[data-child-content]');
mainContainer.appendChild(myElm);

I want to use ember-maybe-in-element addon instead of using appendChild.

Answer 1

The in-element helper renders the block content outside of the regular flow, into a DOM element given by its destinationElement positional argument.

child.js

get destinationElement() {
  return document.querySelector('.container .content');
}

child.hbs

{{#in-element this.destinationElement}}
   <div>Hello World</div>
{{/in-element}}