# AUR9994

## Error Message

`AUR9994: "& attr" can be only used on property binding. It's used on <BindingConstructorName>`

Where `<BindingConstructorName>` is the constructor name of the specific binding class instance it was incorrectly applied to.

## Description

This error occurs when the `attr` binding behavior (used syntactically as `& attr`) is applied to a type of binding other than a standard property binding (like `value.bind`, `src.bind`, etc.). The purpose of `& attr` is specifically to change the target of a property binding from a DOM *property* to an HTML *attribute*.

## Cause

The direct cause is applying `& attr` to an inappropriate binding type. This usually happens when:

1. **Applying to Listener Bindings:** Trying to use `& attr` on event listener bindings like `click.trigger` or `input.capture`.

   ```html
   <!-- Incorrect -->
   <button click.trigger="doSomething() & attr">Click Me</button>
   ```
2. **Applying to Ref Bindings:** Trying to use `& attr` on `ref` bindings.

   ```html
   <!-- Incorrect -->
   <div ref="myDiv & attr"></div>
   ```
3. **Applying to Other Non-Property Bindings:** Attempting to use it with other binding commands or syntax that doesn't resolve to a direct property assignment binding.

The `& attr` behavior only makes sense in the context of bindings that would normally target a DOM property, such as:

* `value.bind="firstName & attr"` (targets the `value` attribute instead of the `value` property)
* `xlink:href.bind="url & attr"` (targets the `xlink:href` attribute)
* `aria-label.bind="label & attr"` (targets the `aria-label` attribute)

## Solution

Remove the `& attr` behavior from any binding that is not a property binding. If you need to manipulate attributes in response to events or other non-property-binding scenarios, you should typically do so using direct DOM manipulation within your view model or component logic, or by binding relevant view model properties to the attributes using standard property bindings (potentially with `& attr` if needed to force attribute targeting).

## Example

```html
<!-- Incorrect: Applied to a trigger binding -->
<button click.trigger="save() & attr">Save</button>

<!-- Correct: Remove & attr from non-property binding -->
<button click.trigger="save()">Save</button>

<!-- Incorrect: Applied to a ref binding -->
<input ref="emailInput & attr" type="email">

<!-- Correct: Remove & attr from non-property binding -->
<input ref="emailInput" type="email">

<!-- Correct Usage: Forcing 'value' binding to target the attribute -->
<input value.bind="query & attr">

<!-- Correct Usage: Binding to a standard attribute like 'aria-label' -->
<!-- Note: & attr is often unnecessary here as Aurelia typically targets attributes like aria-* correctly -->
<div aria-label.bind="computedLabel & attr">Info</div>
```

## Debugging Tips

* Inspect the binding expression where the `& attr` behavior is used.
* Identify the type of binding command being used (e.g., `.bind`, `.trigger`, `.capture`, `ref`).
* If the command is not `.bind` (or implicitly `.bind` via interpolation `${}`), remove the `& attr`.
* If the command *is* `.bind`, ensure the target (the part before `.bind`) corresponds to a standard DOM property that you intend to target as an attribute instead.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur9994.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.