{{yield}}

Renders the block content passed into a component, optionally with data.

Since Ember 4/5 (Octane) Spec ↗

Syntax

{{yield}} | {{yield value to="named"}}

Returns

block — Renders the caller-provided block.

Examples

{{! components/card.hbs }}
<article class="card">
  <header>{{yield to="header"}}</header>
  <div class="body">{{yield}}</div>
</article>
<Card>
  <:header>Profile</:header>
  <:default>Body content</:default>
</Card>

Notes

{{yield}} renders the default block; named blocks use to="name" and the <:name> invocation syntax. Yield values to expose a contextual API, e.g. {{yield (hash actions=this.actions)}}.