# AUR0227

## Error Message

`AUR0227: @bindable is not supported for properties that uses a symbol for name. Use a string for the property name instead.`

## Description

This error occurs when the `@bindable` decorator is applied to a class property (field or getter/setter pair) whose name is defined using a JavaScript `Symbol`.

## Cause

Aurelia's `@bindable` decorator and its underlying binding system fundamentally rely on string-based property names to establish connections between HTML template bindings and component view model properties. Using a `Symbol` as a property name prevents Aurelia from being able to discover and bind to that property from the template in the standard way.

While Symbols are valid property keys in JavaScript/TypeScript, they are not suitable for properties intended to be exposed for binding via the `@bindable` decorator.

## Solution

Refactor your code to use a regular string literal for the name of any property that needs to be decorated with `@bindable`.

## Example

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

const mySymbol = Symbol('myPrivateData');

@customElement({ name: 'my-component', template: `<input value.bind="symbolProp">` })
export class MyComponent {

  // Incorrect: Using @bindable on a property named with a Symbol
  @bindable
  [mySymbol]: string = 'initial value';

  // Correct: Use a string name for bindable properties
  @bindable
  public stringProp: string = 'initial value';
}

// Accessing the component
// <my-component string-prop.bind="someValue"></my-component>
// Attempting to bind to [mySymbol] (symbolProp in the example) would fail.
```

## Debugging Tips

* Identify the property in your component decorated with `@bindable` that uses a `Symbol` for its name.
* Rename the property to use a standard string name.
* Update any internal references within the component's class to use the new string-based name.
* Ensure any bindings in associated templates are updated to use the new, string-based property name (converted to kebab-case for HTML attributes, e.g., `stringProp` becomes `string-prop`).

```
```


---

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