Ember.js Ember.Templates.helpers in-element() Method

Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.

The in-element() is used to render the block content out of the regular flow into a DOM element given by its destination positional argument.

Syntax:

{{in-element destinationTagId}}

Parameters:

• destinationTagId:   It is the destination positional argument that identifies where block content renders.

Steps to Install and Run Ember.js:

Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:

npm install ember-cli

Step 2: Now you can create the project by typing in the following piece of code:

ember new <project-name> --lang en

To start the server, type:

ember serve

Example 1: Type the following code to generate the route for this example:

ember generate route element1

app/components/list.js

Javascript

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

export default class ListComponent extends Component {
    get p() {
        return document.querySelector('#list-show');
    }
}

app/components/list.hbs

HTML

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

app/templates/element1.hbs

HTML

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

Output:

Ember.js Ember.Templates.helpers in-element() Method

Example 2: Type the following code to generate the route for this example:

ember generate route element2

app/components/arr.js

Javascript

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;
    }
}

app/components/arr.hbs

HTML

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

app/components/arr2.js

Javascript

import Component from '@glimmer/component';

export default class Arr2Component extends Component {
    get destiny() {
        return document.querySelector('#list');
    }
}

app/components/arr2.hbs

HTML

{{#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}}

app/templates/elements2.hbs

HTML

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

Output:

Ember.js Ember.Templates.helpers in-element() Method

Reference: https://api.emberjs.com/ember/4.6/classes/Ember.Templates.helpers/methods/in-element?anchor=in-element