Component Args

Anything the parent passes with the @ prefix appears on this.args inside the class and as @name in the template.

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

What you'll learn

Pass values into a component with the @ syntax
Read this.args.foo inside the class
Use the @foo form in the template

A parent component passes data to a child with the @ prefix on angle-bracket invocation. Inside the child, those become this.args.<name> in the class and @<name> in the template.

Passing Args

<UserCard
  @user={{this.currentUser}}
  @compact={{true}}
  @onEdit={{this.startEdit}}
/>

Reading In The Template

{{! app/components/user-card.hbs }}
<div class="card {{if @compact "compact"}}">
  <h3>{{@user.name}}</h3>
  <button {{on "click" @onEdit}}>Edit</button>
</div>

Reading In The Class

import Component from '@glimmer/component';

export default class UserCard extends Component {
  get displayName() {
    const u = this.args.user;
    return u.nickname || u.name;
  }
}

Args Are Read-Only

this.args is frozen. A child cannot reassign this.args.user = ... — it must ask the parent to update via a callback arg like @onChange. This keeps data flow one-way: parent owns state, child receives args and emits events.

Defaults

There is no defaultArgs API; use a getter:

get size() {
  return this.args.size ?? 'medium';
}

Yielding Blocks →