Glimmer Component Class

Glimmer components are minimal ES classes — fields, getters, and decorated methods, with no lifecycle inheritance to fight.

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

What you'll learn

Import Component from the glimmer/component package
Define tracked fields on the class
Read this.args inside the class body

A Glimmer component is a plain ES class. You extend Component, add fields, getters, and @action methods — that’s it. There is no init, no didInsertElement inheritance, no mixins.

The Class

// app/components/counter.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class Counter extends Component {
  @tracked count = 0;

  get total() {
    return this.count + (this.args.start ?? 0);
  }

  @action
  inc() {
    this.count++;
  }
}

What You Get For Free

this.args — a frozen object of @args passed by the parent.
this.isDestroying / this.isDestroyed — true during teardown.
A constructor that takes (owner, args) — call super(...arguments) if you override it.

That’s it. No this.element, no didReceiveAttrs. For DOM work, use a render modifier ({{did-insert}}) or a class-based modifier instead.

Opt-In Helpers

import { cached } from '@glimmer/tracking';

export default class Big extends Component {
  @cached
  get expensive() {
    return slowlyDerive(this.args.input);
  }
}

@cached memoizes a getter as long as its tracked dependencies don’t change. For owner access, use getOwner(this) from @ember/owner.

Component Template →