# AUR0815

## Error Message

`AUR0815: Invalid [case/default-case] usage. The parent [switch] not found; only "*[switch] > *[case|default-case]" relation is supported.`

## Description

This error occurs during template compilation/linking when an element uses a `case` or `default-case` template controller attribute, but it is not a direct child of an element with the `switch` attribute.

## Cause

The `case` and `default-case` attributes are designed to work exclusively as direct children of an element managed by the `switch` attribute. They represent the different conditional branches based on the value bound to `switch`. This error indicates that the required parent-child relationship is missing or broken in the template structure.

Common causes:

1. **Incorrect Nesting:** The element with `case` or `default-case` is not directly nested inside the element with `switch`. There might be intermediate elements, or it might be placed elsewhere entirely.
2. **Missing `switch` Attribute:** The `switch` attribute (e.g., `switch.bind="status"`) is missing from the intended parent element.
3. **Typo:** A typo in `switch`, `case`, or `default-case`.

## Solution

Ensure that any element using `case` or `default-case` is a direct child of the element using the `switch` attribute.

1. **Restructure HTML:** Adjust the HTML structure so that the `case`/`default-case` elements are immediate children of the `switch` element.
2. **Add `switch` Attribute:** Ensure the parent element has the `switch.bind="yourValue"` attribute correctly applied.
3. **Check Spelling:** Verify the spelling of all related attributes (`switch`, `case`, `default-case`).

## Example

```html
<!-- Assume 'user.role' is a property on the view model -->

<!-- Incorrect: 'case'/'default-case' are not direct children -->
<div switch.bind="user.role">
  <div>
    <div case="admin">Admin Controls</div>
    <div case="editor">Editor Tools</div>
    <div default-case>View Only</div>
  </div>
</div>

<!-- Incorrect: Missing 'switch' attribute on parent -->
<div>
  <div case="admin">Admin Controls</div>
  <div default-case>View Only</div>
</div>

<!-- Correct: 'case'/'default-case' are direct children -->
<div switch.bind="user.role">
  <div case="admin">Admin Controls</div>
  <div case="editor">Editor Tools</div>
  <div default-case>View Only</div>
</div>

<!-- Correct: Using <template> as direct children -->
<div switch.bind="user.role">
  <template case="admin">
    <button>Manage Users</button>
  </template>
  <template case="editor">
    <button>Edit Content</button>
  </template>
  <template default-case>
    <p>Welcome, guest!</p>
  </template>
</div>
```

```typescript
// View Model Example
import { customElement } from 'aurelia';

@customElement({ /* ... */ })
export class MyComponent {
  user = {
    role: 'editor' // Example value
  };

  changeRole(newRole: string) {
    this.user.role = newRole;
  }
}
```

## Debugging Tips

* Carefully inspect the HTML structure in your template around the `switch`, `case`, and `default-case` attributes.
* Verify that there are no intermediate elements between the `switch` element and its `case`/`default-case` children.
* Use the browser's element inspector to check the compiled structure if possible, though this error often happens before rendering.
* Check for typos in the attribute names (`switch`, `case`, `default-case`).
* Ensure the `switch` attribute is correctly bound (e.g., `switch.bind="..."`).


---

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