# AUR0810

## Error Message

`AUR0810: Invalid [else] usage, it should follow an [if]`

## Description

This error occurs during template linking when Aurelia encounters an element with an `else` custom attribute, but the immediately preceding element sibling in the DOM (after template compilation) does not have an `if.bind` attribute or another `else` attribute. The `else` attribute must directly follow an `if` or another `else` to form a conditional chain.

## Cause

1. **Incorrect Placement:** The element with the `else` attribute is not placed immediately after the element with the corresponding `if.bind` or `else` attribute in the HTML template. There might be other elements, comments (that aren't removed during compilation), or significant whitespace between them.
2. **Missing `if.bind`:** The preceding element, which was intended to be the start of the conditional block, is missing the `if.bind` attribute.
3. **Template Manipulation:** Manual manipulation of the DOM or compiled template structure before or during linking might disrupt the expected `if`/`else` sequence.
4. **Syntax Error:** A simple typo or syntax error in the template might lead to the `else` being misinterpreted or misplaced relative to the `if`.

## Solution

1. **Verify Placement:** Ensure the element with the `else` attribute is the immediate sibling following the element with `if.bind` or a preceding `else`. Remove any intervening elements, comments, or excessive whitespace that might interfere. Remember that Aurelia operates on the structure *after* template compilation, so whitespace handling by the browser or compiler can sometimes play a role, though typically direct element adjacency is required.
2. **Add `if.bind`:** If the preceding element is missing `if.bind`, add it with the appropriate condition.
3. **Check Template Structure:** Review the HTML template carefully around the `if`/`else` block for any structural issues or typos.

## Example

```html
<!-- Correct Structure -->
<div if.bind="condition">Show if true</div>
<div else>Show if false</div>

<!-- Incorrect: Intervening element -->
<div if.bind="condition">Show if true</div>
<p>Some other text</p> <!-- This <p> breaks the chain -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: Missing if.bind on the first div -->
<div>Show if true?</div> <!-- Missing if.bind -->
<div else>Show if false</div> <!-- AUR0810 Error -->

<!-- Incorrect: else not immediately following -->
<template>
  <div if.bind="condition">Show if true</div>
</template>
<!-- Some other unrelated element or structure -->
<div else>Show if false</div> <!-- AUR0810 Error: 'else' is not linked to the 'if' -->
```

## Debugging Tips

* Carefully inspect the HTML source template around the `if` and `else` elements. Pay close attention to the direct sibling relationship.
* Use the browser's developer tools ("Inspect Element") to look at the DOM structure *after* Aurelia has processed the template. Verify that the element with `else` directly follows the element with `if` (or a previous `else`) in the rendered DOM structure just before the error occurs (this might require stepping through the linking process or examining the structure just before the error is thrown).
* Temporarily remove the `else` block and ensure the `if` block works correctly on its own.
* Simplify the content within the `if` and `else` blocks to basic text to rule out complex content interfering with the structure detection.

```
```


---

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