> For the complete documentation index, see [llms.txt](https://aurelia-1.gitbook.io/v1-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aurelia-1.gitbook.io/v1-docs/templates/template-syntax.md).

# Template syntax

Aurelia 1's templating system strikes a perfect balance between simplicity and power. It enhances HTML with dynamic capabilities, allowing you to create interactive UIs without sacrificing readability.

At its heart, Aurelia 1 templates are HTML files supercharged with data-binding and custom attributes. They seamlessly connect with your JavaScript or TypeScript code, creating a responsive, data-driven interface. This tight integration means your UI reacts naturally to user actions and data changes.

From your first Aurelia 1 project, you'll appreciate how the templating syntax feels familiar yet powerful. Whether building a complex component or displaying data, Aurelia 1's approach keeps your code clean and expressive. It's designed to make your development process more intuitive and efficient, letting you focus on creating great user experiences.

### Features of Aurelia Templating <a href="#features-of-aurelia-templating" id="features-of-aurelia-templating"></a>

* **Two-Way Data Binding:** Aurelia's robust data binding system ensures a seamless data flow between your application's model and the view, keeping both in sync without extra effort.
* **Custom Elements and Attributes:** Extend your HTML with custom elements and attributes that encapsulate complex behaviors, promoting code reuse and modularity.
* **Adaptive Dynamic Composition:** Dynamically render components and templates based on your application's state or user interactions, enabling the creation of flexible and adaptive UIs.
* **Rich Templating Syntax:** Utilize Aurelia's powerful templating syntax for iterating over data, conditionally rendering parts of your UI, and easily handling events.
* **Expression and Interpolation:** Effortlessly bind data to your templates and manipulate attributes with Aurelia's straightforward expression syntax.

## Quick Example

Every Aurelia template is wrapped in a `<template>` tag and paired with a view-model:

```html
<template>
  <h1>${greeting}</h1>
  <input value.bind="name">
  <p>Hello, ${name}!</p>
</template>
```

```javascript
export class Welcome {
  greeting = ‘Welcome to Aurelia';
  name = ‘World';
}
```

## In This Section

* [Binding](/v1-docs/templates/template-syntax/binding.md) — Core data binding with `.bind`, `.one-way`, `.two-way`, and `.one-time`
* [Attribute binding](/v1-docs/templates/template-syntax/attribute-binding.md) — Bind to HTML attributes and properties
* [Event binding](/v1-docs/templates/template-syntax/event-binding.md) — Handle DOM events with `.trigger` and `.delegate`
* [Delegate vs trigger](/v1-docs/templates/template-syntax/delegate-vs-trigger.md) — When to use event delegation vs direct binding
* [Text interpolation](/v1-docs/templates/template-syntax/text-interpolation.md) — String interpolation with `${}` expressions
* [Element content](/v1-docs/templates/template-syntax/element-content.md) — Control element text and HTML content
* [Function references](/v1-docs/templates/template-syntax/function-references.md) — Pass function references in templates
* [Element references](/v1-docs/templates/template-syntax/element-references.md) — Get direct access to DOM elements with `ref`
* [Contextual properties](/v1-docs/templates/template-syntax/contextual-properties.md) — Special properties like `$this`, `$parent`, and `$index`
* [Expression syntax](/v1-docs/templates/template-syntax/expression-syntax.md) — The expression language used in bindings
* [Computed properties](/v1-docs/templates/template-syntax/computed-properties.md) — Derived properties and the `@computedFrom` decorator
* [Let element](/v1-docs/templates/template-syntax/let-element.md) — Declare template-local variables with `<let>`
* [Binding engine internals](/v1-docs/templates/template-syntax/binding-engine-internals.md) — How Aurelia's binding system works under the hood


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://aurelia-1.gitbook.io/v1-docs/templates/template-syntax.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.