@bynary.composables.attribute.Interface.IUseAttributeOptions

@bynary/composables / @bynary/composables/attribute / IUseAttributeOptions

Interface: IUseAttributeOptions

A set of options for useAttribute

Extends

• IBindAttributeOptions

Properties

defaultValue?

optional defaultValue: string

The default value of the attribute, as a fallback, when no initial value has been defined and no value has been assigned in the DOM

Examples

const label = useAttribute('label', { defaultValue: 'baz' });

Or with bindAttribute

const label = signal<string | undefined>(undefined);
bindAttribute('label', label, { defaultValue: 'baz' });

Either of the above will output:

<my-component label="baz"></my-component>

const label = useAttribute('label', { defaultValue: 'baz' });

Or with bindAttribute

const label = signal<string | undefined>(undefined);
bindAttribute('label', mySignal, { defaultValue: 'baz' });

Either of the above will output:

<my-component label="foo"></my-component>

Inherited from

IBindAttributeOptions.defaultValue

Defined in

attribute/src/attribute.composable.ts:65

---

initialValue?

optional initialValue: null | string

The initial value of the attribute, overriding the value assigned in the DOM

Example

const label = useAttribute('label', { initialValue: 'bar' });

<my-component #myComponent label="foo"></my-component>

This will output:

<my-component label="bar"></my-component>

Defined in

attribute/src/attribute.composable.ts:108

---

namespace?

optional namespace: string

The namespace of the attribute

Example

A namespace xyz will result in an attribute my:<attribute-name>:

const label = useAttribute('label', { namespace: 'xyz', initialValue: 'baz' });

Or with bindAttribute

const label = signal('baz');
bindAttribute('label', mySignal, { namespace: 'xyz' });

Either of the above will output:

<my-component xyz:label="baz"></my-component>

Inherited from

IBindAttributeOptions.namespace

Defined in

attribute/src/attribute.composable.ts:28

---

target?

optional target: Element

The target element on which the attribute should be bound

Example

import { useAttribute } from '@bynary/composables/attribute';

@Component({
    selector: 'my-component'
})
class MyComponent {

    label = useAttribute('label', { target: document.body });
}

Inherited from

IBindAttributeOptions.target

Defined in

attribute/src/attribute.composable.ts:83