> For the complete documentation index, see [llms.txt](https://docs.aurelia.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0810.md).

# AUR0810

## Error Message

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

## Description

This error occurs during template linking when an `else` attribute cannot link to a valid preceding `if` or `else if` controller. Conditional branches are an adjacent authoring construct: place each `else` directly after the branch it continues.

## Cause

1. **Incorrect Placement:** The element with the `else` attribute is not placed immediately after the corresponding `if.bind` or `else if` branch. Another controller-bearing structure between branches breaks the chain.
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. **Invalid `else if` Structure:** `else if` must keep `else` and `if.bind` adjacent on the same element. Plain attributes or non-template-controller custom attributes may appear between them. Another template controller means the attributes do not form an `else if` branch.
4. **Template Manipulation:** Manual manipulation of the DOM or compiled template structure before or during linking might disrupt the expected `if`/`else` sequence.
5. **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 if` branch. Remove any intervening elements that break the chain.
2. **Add `if.bind`:** If the preceding element is missing `if.bind`, add it with the appropriate condition.
3. **Check `else if` Syntax:** If you want an `else if` branch, put adjacent `else` and `if.bind` attributes on the same element.
4. **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>

<!-- Correct: else-if chain -->
<div if.bind="step === 0">A</div>
<div else if.bind="step === 1">B</div>
<div else>C</div>

<!-- Correct: plain or non-template custom attributes may appear between else and if.bind -->
<div if.bind="step === 0">A</div>
<div else class="branch" if.bind="step === 1">B</div>

<!-- Incorrect: Intervening template controller -->
<div if.bind="condition">Show if true</div>
<p repeat.for="item of items">${item}</p>
<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' -->

<!-- Unsupported as else-if: another template controller separates the attributes -->
<div if.bind="step === 0">A</div>
<div else repeat.for="item of items" if.bind="step === 1">B</div>
```

## Debugging Tips

* Inspect the source template around the `if` and `else` elements. Pay close attention to the direct sibling relationship.
* Verify the branch order in the source template. Template controllers compile into nested controller views, so the rendered DOM is not a reliable representation of the original branch relationship.
* Temporarily remove the `else` block and confirm that the `if` branch works on its own.
* Simplify the branch content to rule out another template controller changing the structure.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.aurelia.io/developer-guides/error-messages/runtime-html/aur0810.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.