`Component`

A reusable UI building block pairing a template with backing logic.

Since Ember 4/5 (Octane) Spec ↗

Syntax

class X extends Component<Signature>

Returns

Component — A Glimmer component class.

Examples

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

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

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

{{! app/components/counter.hbs }}
<button type="button" {{on "click" this.increment}}>
  Count: {{this.count}}
</button>

Notes

In Octane, prefer Glimmer components from @glimmer/component: no jQuery, no two-way bindings, and a single root by default. Access passed arguments via this.args (immutable); use @tracked for local state.