# AUR9992

## Error Message

`AUR9992: "& updateTrigger" uses node observer to observe, but it does not know how to use events to observe property <<element>@<property> />`

Where `<element>` is the tag name of the element and `<property>` is the name of the property being bound.

## Description

This error occurs when the `updateTrigger` binding behavior (`& updateTrigger:'event1'...'eventN'`) is applied to a binding, but Aurelia's built-in observation system does not know which DOM event(s) correspond to changes for the specified property on the target HTML element. The `updateTrigger` behavior fundamentally works by attaching event listeners to the element; if the system doesn't have a predefined event mapping for the target property, it cannot attach the correct listeners.

## Cause

The core issue is attempting to use `& updateTrigger` on an element/property combination for which Aurelia lacks a default event-based observation strategy. This can happen when:

1. **Binding to Non-Standard Properties:** You are binding to a less common DOM property (e.g., a custom property added by a library, or a standard but rarely observed property like `clientWidth`) and trying to use `updateTrigger`. Aurelia only has built-in event mappings for commonly bound properties like `value`, `checked`, `scrollTop`, `scrollLeft`, etc.
2. **Binding to Custom Element Properties:** You are binding to a property of a custom element, and while the property might be observable, Aurelia doesn't automatically know which *DOM events* signal changes to that property for the purpose of `updateTrigger`.
3. **Typo in Property Name:** A simple typo in the property name might lead Aurelia to look for an observation strategy for a non-existent property.

## Solution

1. **Use Standard Observable Properties:** Whenever possible, bind to standard HTML element properties for which Aurelia has built-in observation and event mappings (like `value`, `checked`, `selected`, `scrollTop`, `scrollLeft`).
2. **Implement Manual Update Logic:** If you need to update your view model based on events related to a non-standard or custom property, use explicit event bindings (`.trigger` or `.capture`) instead of `& updateTrigger`. Call a view model method from the event handler to read the necessary value from the element and update your view model property.
3. **Configure Custom Observation (Advanced):** For custom elements or scenarios where you consistently need event-based observation for a specific property, you could potentially extend Aurelia's `NodeObserverLocator` with a custom strategy, but this is an advanced technique and usually unnecessary. Manual update logic (Solution 2) is often simpler.
4. **Check for Typos:** Ensure the property name in your binding is spelled correctly.

## Example

```html
<!-- Correct: updateTrigger works for standard 'value' on input -->
<input value.bind="userName & updateTrigger:'blur'">

<!-- Incorrect: Assuming 'data-custom-val' is a property Aurelia doesn't know how to observe via events -->
<div data-custom-val.bind="myData & updateTrigger:'some-event'">...</div>

<!-- Solution 2: Manual update for non-standard property/event -->
<div data-custom-val.from-view="myData" some-event.trigger="updateMyData($event.target.dataset.customVal)">...</div>

<!-- Incorrect: Binding to a read-only property like clientWidth with updateTrigger -->
<div client-width.bind="divWidth & updateTrigger:'resize'">...</div> <!-- Makes little sense, clientWidth isn't set by events -->

<!-- Solution 2 (Conceptual): Update based on relevant event -->
<div resize.trigger="updateWidth($event.target.clientWidth)">...</div>

```

```typescript
// View Model for Manual Update Logic (Solution 2)
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  myData: string = '';
  divWidth: number = 0;

  updateMyData(newValue: string) {
    this.myData = newValue;
    console.log('Updated myData:', this.myData);
  }

  updateWidth(newWidth: number) {
    this.divWidth = newWidth;
    console.log('Updated width:', this.divWidth);
    // Note: Listening to 'resize' on a div might require specific setup or using window resize.
  }
}
```

## Debugging Tips

* Verify the exact property name being bound. Is it a standard DOM property known to be observable via events in Aurelia (like `value`, `checked`)?
* Check if the property is read-only (like `clientWidth`, `offsetHeight`). `updateTrigger` is for properties that change based on user interaction or other events that modify the element's state in a way that should update the view model.
* Consider if the goal can be achieved using standard two-way binding or one-way binding combined with explicit event listeners (`.trigger`/`.capture`) instead of `& updateTrigger`.
* Temporarily remove `& updateTrigger` to see if a standard binding works, which helps isolate the issue to the event trigger mechanism.


---

# 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/aur9992.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.