@bynary.composables.attribute.Function.useAttribute

@bynary/composables / @bynary/composables/attribute / useAttribute

Function: useAttribute()

useAttribute(attributeName, options?): WritableSignal<string | null | undefined>

Creates a signal that binds its value as an attribute on the host element or a different target element.

Parameters

• attributeName: string

The name of the attribute

• options?: IUseAttributeOptions

A set of options

Returns

WritableSignal<string | null | undefined>

A signal holding the value of the attribute

Examples

By default, this composable will read the value of the attribute from the usage in the template

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

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

    label = useAttribute('label');
}

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

This will output:

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

You can also change the value of the attribute programmatically by using the returned signal:

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

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

    label = useAttribute('label');

    constructor() {
        this.label.set('programmatically set value');
    }
}

<my-component #myComponent></my-component>

This will output:

<my-component label="programmatically set value"></my-component>

Defined in

attribute/src/attribute.composable.ts:200