Targets

Targets let you reference element(s) by name.

Attributes and names

The data-target attribute is a space-separated list of target names that can be referenced in the element.

<greet-user>
  <div data-target="greet-user.result"></div>
  <div data-target="greet-user.errorMessage"></div>
</greet-user>

Shared targets

An element can have multiple target references.

<user-settings>
  <greet-user>
    <div data-target="greet-user.result user-settings.result"></div>
    <div data-target="greet-user.errorMessage"></div>
  </greet-user>
</user-settings>

Single target

A single target can be referenced via the @target() decorator. It is a syntactic sugar for this.querySelector('...').

<greet-user>
  <div data-target="greet-user.result"></div>
</greet-user>

// elements/greet_user_element.ts
import { ImpulseElement, registerElement, target } from '@ambiki/impulse';

@registerElement('greet-user')
export default class GreetUserElement extends ImpulseElement {
  @target() result: HTMLElement;

  // ...
}

Multiple targets

Multiple targets can be referenced via the @targets() decorator. It is a syntactic sugar for Array.from(this.querySelectorAll('...')).

<greet-user>
  <div data-target="greet-user.results"></div>
  <div data-target="greet-user.results"></div>
</greet-user>

// elements/greet_user_element.ts
import { ImpulseElement, registerElement, targets } from '@ambiki/impulse';

@registerElement('greet-user')
export default class GreetUserElement extends ImpulseElement {
  @targets() results: HTMLElement[];

  // ...
}

Connected and disconnected callbacks

Using the @target() or @targets() decorator lets you respond whenever a target element is connected or disconnected from the DOM.

Define a [target]Connected or [target]Disconnected function, where [target] is the name of the target you want to observe. The function receives the element as the first argument.

import { ImpulseElement, registerElement, target } from '@ambiki/impulse';

@registerElement('greet-user')
export default class GreetUserElement extends ImpulseElement {
  @target() result: HTMLElement;

  resultConnected(result: HTMLElement) {
    // result connected to the DOM.
  }

  resultDisconnected(result: HTMLElement) {
    // result disconnected from the DOM.
  }
}

Naming conventions

Always use camelCase to reference the target in your HTML.

<div data-target="greet-user.doThis"></div>
<div data-target="greet-user.avoid_this"></div>

import { ImpulseElement, registerElement, target } from '@ambiki/impulse';

@registerElement('greet-user')
export default class GreetUserElement extends ImpulseElement {
  @target() doThis: HTMLElement;
}