Package @glimmer/component

public

A component is a reusable UI element that consists of a .hbs template and an
optional JavaScript class that defines its behavior. For example, someone
might make a button in the template and handle the click behavior in the
JavaScript file that shares the same name as the template.

The APIs available in a component vary depending on whether they import from
@glimmer/component or the older "classic" type, @ember/component. The
documentation below covers 100% of the available methods, hooks, and
properties of @glimmer/component. The source code can be found in
@glimmer/component.

Defining a component

To define a component, subclass Component and add your own properties,
methods and lifecycle hooks:

constructor

params: owner object and args object

Constructs a new component and assigns itself the passed properties. The
constructor is run whenever a new instance of the component is created, and
can be used to setup the initial state of the component.

args

The args property of Glimmer components is an object that contains the
arguments that are passed to the component. For instance, the
following component usage:

1

<SomeComponent @fadeIn={{true}} />

Would result in the following args object to be passed to the component:

1

{ fadeIn: true }

args can be accessed at any point in the component lifecycle, including
constructor and willDestroy. They are also automatically marked as tracked
properties, and they can be depended on as computed property dependencies: