{{in-element destinationTagId}}

npm install ember-cli

ember new <project-name> --lang en

ember serve

ember generate route element1

import Component from '@glimmer/component'; 
import { tracked } from '@glimmer/tracking'; 
  
export default class ListComponent extends Component { 
    get p() { 
        return document.querySelector('#list-show'); 
    } 
} 

{{#in-element this.p}} 
    {{#each @a as |temp|}} 
        <li> 
              {{temp}} 
        </li> 
      {{/each}} 
{{/in-element}}

{{page-title "in-element"}} 
Describing in-element :  
<div id="list-show"></div> 
<List @a={{array 'Sam' 'Rahul' 'Dadu' 'Arabh' }} @p={{true}}> 
</List>

ember generate route element2

import Component from '@glimmer/component'; 
import { tracked } from '@glimmer/tracking'; 
import { action } from '@ember/object'; 
  
export default class Arr2Component extends Component { 
    @tracked 
    showlist = false; 
    @action 
    change() { 
        this.showlist = true; 
    } 
} 

<button type="button" {{on "click" this.change}}> 
    Append list 
</button> 
<div id="list"></div> 
<Arr2 @show={{this.showlist}} />

import Component from '@glimmer/component'; 
  
export default class Arr2Component extends Component { 
    get destiny() { 
        return document.querySelector('#list'); 
    } 
} 

{{#if @show}} 
    {{#in-element this.destiny}} 
        <ul> 
              <li>Ram</li> 
              <li>Lalu</li> 
              <li>Rohit</li> 
              <li>Arabh</li> 
              <li>Sam</li> 
            <li>Pokhu</li> 
        </ul> 
  {{/in-element}} 
{{/if}}

{{page-title "In-Element"}} 
<h2> 
    Describing in-element helper 
</h2> 
<Arr/>