Component Template

A .hbs file with the same name as the .js gets auto-bound — this is the class, args appear via the @ prefix, and {{yield}} renders children.

4 min read Level 2/5 #ember#components#templates

What you'll learn

Access this dot properties and the @ args from the template
Use the yield helper for a default slot
Use named slots like `<:header>` with `{{yield to="header"}}`

Octane colocates the template next to the class. app/components/my-card.js pairs with app/components/my-card.hbs. Inside the .hbs file, this is the class instance and @foo is this.args.foo.

A Minimal Template

{{! app/components/my-card.hbs }}
<article class="card">
  <h2>{{@title}}</h2>
  <p>By {{this.author}}</p>
  {{yield}}
</article>

The parent invokes with angle brackets and passes args with the @ prefix:

<MyCard @title="Welcome">
  This text fills the default block.
</MyCard>

Named Blocks

When you need more than one slot, declare named blocks with {{yield to="..."}}:

{{! my-card.hbs }}
<article>
  <header>{{yield to="header"}}</header>
  <div class="body">{{yield}}</div>
</article>

<MyCard>
  <:header>Big Title</:header>
  <:default>Body content here</:default>
</MyCard>

Yielding Data

You can pass values out to the block — useful for renderless components:

{{yield (hash count=this.count inc=this.inc)}}

The parent destructures via as |api| and uses api.count, api.inc.

Tracked Properties →