# AUR0751

## Error Message

`AUR0751: Attempted to reference "<property>", but it was not found amongst the target's API.`

Where `<property>` is the name specified in the `ref` attribute in the template.

## Description

This error occurs during component initialization (hydration) when the `ref` attribute is used on an element in the template (e.g., `<div ref="myElement">`), but the corresponding property (`myElement` in this case) does not exist on the component's view model instance. The `ref` attribute requires a matching property on the view model to assign the element reference to.

## Cause

1. **Typo:** The property name specified in the `ref` attribute in the template does not exactly match the property name declared in the view model class (case-sensitive).
2. **Missing Property:** The property was never declared in the view model class.
3. **Incorrect Scope/Instance:** Although rare for `ref`, in complex scenarios, the context might be such that the expected view model instance isn't the one being used, though typically `ref` operates directly on the component's own view model.

## Solution

1. **Check Spelling:** Ensure the property name used in the `ref="propertyName"` attribute in your HTML template exactly matches the property name declared in your component's TypeScript/JavaScript class, including case.
2. **Declare the Property:** Add the missing property declaration to your view model class. The type should typically be the appropriate HTMLElement type (e.g., `HTMLInputElement`, `HTMLDivElement`, `HTMLElement`) or `Element`.

## Example

**Template (HTML):**

```html
<template>
  <input ref="emailInput" type="email" placeholder="Enter email">
  <div ref="containerDiv">Some content</div>

  <!-- Incorrect: Typo 'userNmaeInput' vs 'usernameInput' -->
  <input ref="userNmaeInput" type="text">

  <!-- Incorrect: 'submitButton' property missing in VM -->
  <button ref="submitButton">Submit</button>
</template>
```

**View Model (TypeScript):**

```typescript
import { customElement } from 'aurelia';

@customElement({ /* template from above */ })
export class MyFormComponent {
  // Correctly declared properties matching refs
  emailInput: HTMLInputElement;
  containerDiv: HTMLDivElement;

  // Correct property name for the input
  usernameInput: HTMLInputElement;

  // Missing property declaration for 'submitButton' would cause AUR0751

  bound() {
    // Properties are assigned *before* bound is called
    console.log(this.emailInput); // Logs the <input> element
    console.log(this.containerDiv); // Logs the <div> element
    console.log(this.usernameInput); // Logs the <input> element

    // Accessing this.submitButton would fail if not declared
    // if (this.submitButton) { /* ... */ }
  }
}
```

## Debugging Tips

* Carefully compare the string value in the `ref="..."` attribute in your template with the property declaration in your view model. Check for typos, extra spaces, or case mismatches.
* Ensure the property is declared directly on the class instance, not as a static property or within a method scope (unless intentionally managed differently, which is atypical for `ref`).
* If using dynamic component generation or complex scenarios, verify that the correct view model instance is being associated with the template containing the `ref`.

\</rewritten\_file>


---

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