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.

Parameters:

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}} />
</div>
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;
      names.push(node.nodeName);
    } while (node !== lastNode);

    console.log(names);
    // ["#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>
{{else}}
  Normal User
{{/if}}

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:

<h1>Modal</h1>
<div class="contents" ...attributes>
  {{yield}}
</div>

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

Parameters:

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

Parameters:

Name Type
injections any

Returns: Component