# Ember Handlebars capsuled?

**URL:** <https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779>\
**Category:** General\
**Created:** [July 3, 2019, 11:58am UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779 "2019-07-03T11:58:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![FlorianKrippner](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/floriankrippner/32/16549_2.png) [@FlorianKrippner](https://discuss.emberjs.com/u/FlorianKrippner)\
**Post date:** [July 3, 2019, 11:58am UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/1 "2019-07-03T11:58:20Z")

</div>

Hej guys, I have the following problem. Here first the code:

```
{{#each this.example as |component|}}

    {{#if-equal param1={{component.name}} param2="componentName"}}

        {{coolcomponent}}

    {{/if-equal}}

{{/each}}

```

explanation: i am going throw a object array and if i find a component name that equal the param2 then i want to use a spezific component.

i am getting a error because i cant do this `{{component.name}}` inside the `{{#if-equal}}`. Is there a way to get around this ? Or a other good solution to do this ?

P.S. the #if-equal just checks if param1 is equal param2

---

<div class="post-metadata">

**Author:** ![acorncom](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/acorncom/32/12198_2.png) [@acorncom](https://discuss.emberjs.com/u/acorncom)\
**Post date:** [July 3, 2019, 12:25pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/2 "2019-07-03T12:25:44Z")

</div>

change it to this and you should be set:

```auto
{{#each this.example as |component|}}
  {{#if-equal param1=component.name param2="componentName"}}
    {{coolcomponent}}
  {{/if-equal}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![FlorianKrippner](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/floriankrippner/32/16549_2.png) [@FlorianKrippner](https://discuss.emberjs.com/u/FlorianKrippner)\
**Post date:** [July 3, 2019, 1:03pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/3 "2019-07-03T13:03:14Z")

</div>

working now… thanks. i think that was the first thing i tested and i got an error. maybe a typo.

---

<div class="post-metadata">

**Author:** ![FlorianKrippner](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/floriankrippner/32/16549_2.png) [@FlorianKrippner](https://discuss.emberjs.com/u/FlorianKrippner)\
**Post date:** [July 3, 2019, 2:00pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/4 "2019-07-03T14:00:46Z")

</div>

i have another question for u. I am creating with this each loop dynamically components. now each component needs a different id for my usage.

Is there a option to set propertys inside handlebars ? like this ?

```
{{#each this.example as |component|}}
    {{component component.name (set id here)}}
{{/each}}

```

P.S.: i am totally new to ember so thanks for your help

---

<div class="post-metadata">

**Author:** ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)\
**Post date:** [July 3, 2019, 2:04pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/5 "2019-07-03T14:04:31Z")

</div>

You should just be able to pass the id in as an argument just like in any old component invocation. For example you could do this:

```auto
{{#each this.example as |component index|}}
    {{component component.name id=index}}
{{/each}}

```

or

```auto
{{#each this.example as |component index|}}
    {{component component.name id=(concat 'component_' index)}}
{{/each}}

```

or

```auto
{{#each this.example as |component|}}
    {{component component.name id=(concat "component_" component.name)}}
{{/each}}

```

---

<div class="post-metadata">

**Author:** ![FlorianKrippner](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/floriankrippner/32/16549_2.png) [@FlorianKrippner](https://discuss.emberjs.com/u/FlorianKrippner)\
**Post date:** [July 3, 2019, 2:14pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/6 "2019-07-03T14:14:24Z")

</div>

i mean i need the id inside the component .js to do some stuff. so i dont need to set the id of the div.

or is there a easy way to get the div id inside the component.js file without knocking the id ?

solved it myself: this.elementId

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [July 3, 2019, 2:24pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/7 "2019-07-03T14:24:44Z")

</div>

The examples above don’t set the HTML Element `id`. They pass an argument to the component named `id`. So inside the component.js, it’s available as `this.id`. You could change the name from `id` to anything else.

---

<div class="post-metadata">

**Author:** ![ef4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ef4/32/13470_2.png) [@ef4](https://discuss.emberjs.com/u/ef4)\
**Post date:** [July 3, 2019, 2:24pm UTC](https://discuss.emberjs.com/t/ember-handlebars-capsuled/16779/8 "2019-07-03T14:24:59Z")

</div>

But yes, you can control the actual HTML id with `elementId`.