`Glimmer Component`

The modern component base class with one-way data flow and no classic lifecycle.

Since Ember 4/5 (Octane) Spec ↗

Syntax

class X extends Component<Signature> { args; }

Returns

Component — A Glimmer component instance.

Examples

import Component from '@glimmer/component';

interface AvatarSignature {
  Args: { user: { name: string; url: string } };
}

export default class AvatarComponent extends Component<AvatarSignature> {
  get initials() {
    return this.args.user.name
      .split(' ')
      .map((p) => p[0])
      .join('');
  }
}

Notes

this.args is read-only and reflects what the parent passes. There is no this.element or didInsertElement; use modifiers for DOM work and the `willDestroy()` hook for cleanup. Provide a Signature for typed args.