API ReferenceGlobalsAbstractParameter

# Class: AbstractParameter

# Hierarchy

# Index

# Constructors

# Properties

# Methods

# Constructors

# constructor

+ new AbstractParameter(options: object): AbstractParameter

Inherited from AbstractParameter.constructor

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:257

Constructs a new component and assigns itself the passed properties. You should not construct new components yourself. Instead, Glimmer will instantiate new components automatically as it renders.


Name Type Description
options object

Returns: AbstractParameter

# Properties

# args

args: any

Inherited from AbstractParameter.args

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:252

Named arguments passed to the component from its parent component. They can be accessed in JavaScript via this.args.argumentName and in the template via @argumentName.

Say you have the following component, which will have two args, firstName and lastName:

<my-component @firstName="Arthur" @lastName="Dent" />

If you needed to calculate fullName by combining both of them, you would do:

didInsertElement() {
  console.log(`Hi, my full name is ${this.args.firstName} ${this.args.lastName}`);

While in the template you could do:

<p>Welcome, {{@firstName}} {{@lastName}}!</p>

# bounds

bounds: Bounds

Inherited from AbstractParameter.bounds

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:205

Contains the first and last DOM nodes of a component's rendered template. These nodes can be used to traverse all of the DOM nodes that belong to a particular component.

Note that a component's first and last nodes can change over time, if the beginning or ending of the template is dynamic. You should always access bounds directly at the time a node is needed to ensure you are acting on up-to-date nodes.

# Examples

For components with a single root element, this.bounds.firstNode and this.bounds.lastNode are the same.

<div class="user-profile">
  <Avatar @user={{user}} />
export default class extends Component {
  didInsertElement() {
    let { firstNode, lastNode } = this.bounds;
    console.log(firstNode === lastNode); // true
    console.log(firstNode.className); // "user-profile"

For components with multiple root nodes, this.bounds.firstNode refers to the first node in the template and this.bounds.lastNode refers to the last:

Welcome to Glimmer.js!
<span>Let's build some components!</span>
<img src="logo.png">
export default class extends Component {
  didInsertElement() {
    let { firstNode, lastNode } = this.bounds;

    // Walk all of the DOM siblings from the
    // firstNode to the lastNode and push their
    // nodeName into an array.
    let node = firstNode;
    let names = [firstNode.nodeName];
    do {
      node = node.nextSibling;
    } while (node !== lastNode);

    // ["#text", "SPAN", "IMG"]

The bounds can change if the template has dynamic content at the beginning or the end:

{{#if user.isAdmin}}
  <span class="warning">Admin</span>
  Normal User

In this example, the firstNode will change between a span element and a TextNode as the user.isAdmin property changes.

# debugName

debugName: string | null

Inherited from AbstractParameter.debugName

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:226

Development-mode only name of the component, useful for debugging.

# element

element: HTMLElement

Inherited from AbstractParameter.element

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:222

The element corresponding to the main element of the component's template. The main element is the element in the template that has ...attributes set on it:

<div class="contents" ...attributes>

In this example, this.element would be the div with the class contents.

You should not try to access this property until after the component's didInsertElement() lifecycle hook is called.

# Methods

# changeParam

changeParam(value: any): Promise‹void›

Defined in packages/glimmer-ui/configurator-ui/src/ui/components/-utils/AbstractParameter.ts:22


Name Type
value any

Returns: Promise‹void›

# destroy

destroy(): void

Inherited from AbstractParameter.destroy

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:280

Returns: void

# didInsertElement

didInsertElement(): void

Inherited from AbstractParameter.didInsertElement

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:270

Called when the component has been inserted into the DOM. Override this function to do any set up that requires an element in the document body.

Returns: void

# didUpdate

didUpdate(): void

Inherited from AbstractParameter.didUpdate

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:275

Called when the component has updated and rerendered itself. Called only during a rerender, not during an initial render.

Returns: void

# requestShowDetails

requestShowDetails(): void

Defined in packages/glimmer-ui/configurator-ui/src/ui/components/-utils/AbstractParameter.ts:43

Returns: void

# toString

toString(): string

Inherited from AbstractParameter.toString

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:281

Returns: string

# willDestroy

willDestroy(): void

Inherited from AbstractParameter.willDestroy

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:279

Called before the component has been removed from the DOM.

Returns: void

# Static create

create(injections: any): Component

Inherited from AbstractParameter.create

Defined in packages/glimmer-ui/configurator-ui/node_modules/@glimmer/component/dist/types/src/component.d.ts:257


Name Type
injections any

Returns: Component