# Templates Overview & Quick Reference

Welcome to the Aurelia templating documentation! This guide covers everything you need to build dynamic, interactive UIs with Aurelia's powerful templating system.

## Quick Start

New to Aurelia templates? Start here:

1. [**Cheat Sheet**](https://docs.aurelia.io/templates/cheat_sheet) - Quick syntax reference for all template features
2. [**Template Syntax Overview**](https://docs.aurelia.io/templates/overview) - Core concepts and features
3. [**Real-World Recipes**](https://docs.aurelia.io/templates/real-world-recipes/recipes) - Complete working examples

## How Do I...?

Find what you need quickly with this task-based guide:

### Display Data

* **Show dynamic text?** → [Text Interpolation](https://docs.aurelia.io/templates/overview/text-interpolation) - Use `${property}`
* **Bind to element properties?** → [Attribute Binding](https://docs.aurelia.io/templates/overview/attribute-binding) - Use `.bind`, `.to-view`, `.two-way`
* **Format data for display?** → [Value Converters](https://docs.aurelia.io/templates/value-converters) - Use `${value | converter}`
* **Show/hide elements?** → [Conditional Rendering](https://docs.aurelia.io/templates/conditional-rendering) - Use `if.bind` or `show.bind`

### Work with Lists

* **Loop through an array?** → [List Rendering](https://docs.aurelia.io/templates/repeats-and-list-rendering) - Use `repeat.for="item of items"`
* **Get the current index?** → [List Rendering: Contextual Properties](https://docs.aurelia.io/repeats-and-list-rendering#contextual-properties) - Use `$index`, `$first`, `$last`
* **Handle empty lists?** → [Conditional Rendering](https://docs.aurelia.io/templates/conditional-rendering) - Combine `if.bind="items.length === 0"` with `else`
* **Optimize large lists?** → [List Rendering: Performance](https://docs.aurelia.io/repeats-and-list-rendering#performance-optimization-with-keys) - Use `key.bind` or `key:`

### Handle User Input

* **Capture button clicks?** → [Event Binding](https://docs.aurelia.io/templates/overview/event-binding) - Use `click.trigger="method()"`
* **Handle keyboard input?** → [Event Binding: Keyboard Events](https://docs.aurelia.io/overview/event-binding#keyboard-key-mappings-and-custom-modifiers) - Use `keydown.trigger:enter="submit()"`
* **Create two-way form bindings?** → [Forms](https://docs.aurelia.io/templates/forms/forms) - Use `value.bind="property"`
* **Prevent default behavior?** → [Event Binding: Modifiers](https://docs.aurelia.io/overview/event-binding#event-modifiers-enhancing-event-handling) - Use `click.trigger:prevent="method()"`
* **Debounce rapid input?** → [Event Binding: Binding Behaviors](https://docs.aurelia.io/overview/event-binding#throttling-and-debouncing-event-handlers) - Use `input.trigger="search() & debounce:300"`

### Conditional Logic

* **Show content based on a condition?** → [Conditional Rendering: if.bind](https://docs.aurelia.io/conditional-rendering#using-ifbind)
* **Toggle visibility frequently?** → [Conditional Rendering: show.bind](https://docs.aurelia.io/conditional-rendering#using-showbind)
* **Handle multiple conditions?** → [Conditional Rendering: switch.bind](https://docs.aurelia.io/conditional-rendering#using-switchbind)
* **Show if/else branches?** → [Conditional Rendering: else](https://docs.aurelia.io/conditional-rendering#ifelse-structures) - Use `else` after `if.bind`

### Styling

* **Apply dynamic CSS classes?** → [Class & Style Binding](https://docs.aurelia.io/templates/class-and-style-bindings)
* **Bind inline styles?** → [Class & Style Binding](https://docs.aurelia.io/templates/class-and-style-bindings)
* **Toggle classes conditionally?** → [Class & Style Binding](https://docs.aurelia.io/templates/class-and-style-bindings)

### Components

* **Use a component in my template?** → [Component Basics: Importing](https://docs.aurelia.io/components/components#importing-components) - Use `<import from="./my-component"></import>`
* **Make a component available globally?** → [Component Basics: Global Registration](https://docs.aurelia.io/components/components#global-registration)
* **Pass data to a component?** → [Bindable Properties](https://docs.aurelia.io/components/bindable-properties) - Use `@bindable` and bind in parent
* **Get a reference to an element?** → [Template References](https://docs.aurelia.io/templates/overview/template-references) - Use `ref="elementName"`
* **Slot content into a component?** → [Slotted Content](https://docs.aurelia.io/components/shadow-dom-and-slots)

### Forms

* **Build a form?** → [Forms: Basic Inputs](https://docs.aurelia.io/forms/forms#basic-input-binding)
* **Validate form input?** → [Validation Plugin](https://docs.aurelia.io/aurelia-packages/validation)
* **Handle form submission?** → [Forms: Submission](https://docs.aurelia.io/templates/forms/submission)
* **Work with checkboxes?** → [Forms: Collections](https://docs.aurelia.io/forms/collections#boolean-checkboxes)
* **Handle file uploads?** → [Forms: File Uploads](https://docs.aurelia.io/templates/forms/file-uploads)

### Advanced

* **Create reusable template behaviors?** → [Custom Attributes](https://docs.aurelia.io/templates/custom-attributes)
* **Transform data in templates?** → [Value Converters](https://docs.aurelia.io/templates/value-converters)
* **Control binding behavior?** → [Binding Behaviors](https://docs.aurelia.io/templates/binding-behaviors)
* **Work with promises?** → [Template Promises](https://docs.aurelia.io/templates/overview/template-promises) - Use `promise.bind`
* **Create local template variables?** → [Template Variables](https://docs.aurelia.io/templates/overview/template-variables) - Use `<let>`
* **Change binding context for a section?** → [`with.bind`](https://docs.aurelia.io/templates/with)
* **Bind element focus state?** → [`focus`](https://docs.aurelia.io/templates/focus) - Use `focus.bind`
* **Spread config objects / forward captured attrs?** → [Spread operators](https://docs.aurelia.io/templates/spread-binding) - Use `...$bindables` / `...$attrs`
* **Render markup elsewhere in the DOM?** → [Portalling elements](https://docs.aurelia.io/getting-to-know-aurelia/composition-patterns/portalling-elements) - Use `portal`
* **Compose components dynamically?** → [Dynamic composition](https://docs.aurelia.io/getting-to-know-aurelia/composition-patterns/dynamic-composition) - Use `<au-compose>`
* **Work with SVG?** → [SVG](https://docs.aurelia.io/templates/svg)
* **Use lambda expressions?** → [Lambda Expressions](https://docs.aurelia.io/templates/lambda-expressions)

## Documentation Structure

### Core Concepts

* [**Template Syntax Overview**](https://docs.aurelia.io/templates/overview) - Start here for the big picture
* [**Cheat Sheet**](https://docs.aurelia.io/templates/cheat_sheet) - Quick reference for all syntax

### Template Syntax

* [**Text Interpolation**](https://docs.aurelia.io/templates/overview/text-interpolation) - Display data with `${}`
* [**Attribute Binding**](https://docs.aurelia.io/templates/overview/attribute-binding) - Bind to element properties and attributes
* [**Event Binding**](https://docs.aurelia.io/templates/overview/event-binding) - Handle user interactions
* [**Template References**](https://docs.aurelia.io/templates/overview/template-references) - Access DOM elements with `ref`
* [**Template Variables**](https://docs.aurelia.io/templates/overview/template-variables) - Create local variables with `<let>`
* [**`with.bind`**](https://docs.aurelia.io/templates/with) - Re-scope a section to an object
* [**Template Promises**](https://docs.aurelia.io/templates/overview/template-promises) - Handle async data with `promise.bind`
* [**Spread operators**](https://docs.aurelia.io/templates/spread-binding) - Bindables spreading and attribute transferring
* [**Globals**](https://docs.aurelia.io/templates/overview/globals) - Built-in global functions and values

### Display Logic

* [**Conditional Rendering**](https://docs.aurelia.io/templates/conditional-rendering) - Show/hide content with `if`, `show`, `switch`
* [**List Rendering**](https://docs.aurelia.io/templates/repeats-and-list-rendering) - Loop over data with `repeat.for`
* [**Class & Style Bindings**](https://docs.aurelia.io/templates/class-and-style-bindings) - Dynamic CSS

### Data Transformation

* [**Value Converters**](https://docs.aurelia.io/templates/value-converters) - Format and transform data (like pipes)
* [**Binding Behaviors**](https://docs.aurelia.io/templates/binding-behaviors) - Control binding flow (debounce, throttle, etc.)

### Forms & Input

* [**Forms Overview**](https://docs.aurelia.io/templates/forms/forms) - Working with form inputs
* [**Form Collections**](https://docs.aurelia.io/templates/forms/collections) - Checkboxes, radios, multi-select
* [**Form Submission**](https://docs.aurelia.io/templates/forms/submission) - Submit forms and handle user feedback
* [**File Uploads**](https://docs.aurelia.io/templates/forms/file-uploads) - Handle file inputs and uploads
* [**Validation Plugin**](https://docs.aurelia.io/aurelia-packages/validation) - Validate user input

### Extensibility

* [**Custom Attributes**](https://docs.aurelia.io/templates/custom-attributes) - Create reusable template behaviors
* [**Advanced Custom Attributes**](https://docs.aurelia.io/templates/advanced-custom-attributes) - Complex attribute patterns

### Other Features

* [**Lambda Expressions**](https://docs.aurelia.io/templates/lambda-expressions) - Arrow functions in templates
* [**Local Templates**](https://docs.aurelia.io/templates/local-templates) - Inline component definitions
* [**SVG**](https://docs.aurelia.io/templates/svg) - Working with SVG elements

### Real-World Examples

* [**Recipes**](https://docs.aurelia.io/templates/real-world-recipes/recipes) - Complete, production-ready examples
  * [Product Catalog](https://docs.aurelia.io/templates/real-world-recipes/product-catalog) - Search, filter, sort
  * [Shopping Cart](https://docs.aurelia.io/templates/real-world-recipes/shopping-cart) - Add/remove items, calculate totals
  * More coming soon—follow the contribution guide in the recipes index to share yours!

## Learning Path

Not sure where to start? Follow this path:

### Beginner

1. Read [**Template Syntax Overview**](https://docs.aurelia.io/templates/overview)
2. Learn [**Text Interpolation**](https://docs.aurelia.io/templates/overview/text-interpolation) and [**Attribute Binding**](https://docs.aurelia.io/templates/overview/attribute-binding)
3. Try [**Event Binding**](https://docs.aurelia.io/templates/overview/event-binding) for interactivity
4. Practice with [**Product Catalog Recipe**](https://docs.aurelia.io/templates/real-world-recipes/product-catalog)

### Intermediate

5. Master [**Conditional Rendering**](https://docs.aurelia.io/templates/conditional-rendering) (`if`, `show`, `switch`)
6. Learn [**List Rendering**](https://docs.aurelia.io/templates/repeats-and-list-rendering) (`repeat.for`)
7. Explore [**Value Converters**](https://docs.aurelia.io/templates/value-converters) for data formatting
8. Build forms with [**Forms Guide**](https://docs.aurelia.io/templates/forms/forms)
9. Try [**Shopping Cart Recipe**](https://docs.aurelia.io/templates/real-world-recipes/shopping-cart)

### Advanced

10. Create [**Custom Attributes**](https://docs.aurelia.io/templates/custom-attributes)
11. Use [**Binding Behaviors**](https://docs.aurelia.io/templates/binding-behaviors) for fine control
12. Work with [**Template Promises**](https://docs.aurelia.io/templates/overview/template-promises)
13. Explore [**Advanced Custom Attributes**](https://docs.aurelia.io/templates/advanced-custom-attributes)
14. Adapt real-world patterns from the [**Template Recipes collection**](https://docs.aurelia.io/templates/real-world-recipes/recipes)

## Performance Tips

* Use `.to-view` binding for display-only data
* Add `key` to `repeat.for` for dynamic lists
* Use `show.bind` for frequent visibility toggles
* Use `if.bind` for infrequent changes
* Debounce rapid input events
* Keep expressions simple - move logic to view model

## Common Pitfalls

* **Components not appearing?** → Don't forget `<import from="./component"></import>` (or register globally)
* **Array changes not detected?** → Use array methods like `push()`, `splice()`, not direct index assignment
* **Form input not updating?** → Use `.bind` or `.two-way`, not `.to-view`
* **Performance issues with large lists?** → Add `key.bind` or `key:` to `repeat.for`
* **Bindings not working?** → Check for typos in property names and binding commands

## Need Help?

* Check the [**Cheat Sheet**](https://docs.aurelia.io/templates/cheat_sheet) for quick syntax reference
* Browse [**Recipes**](https://docs.aurelia.io/templates/real-world-recipes/recipes) for complete examples
* Review [**Template Syntax Overview**](https://docs.aurelia.io/templates/overview) for core concepts
* Search the "How Do I...?" section above
* Visit [Aurelia Discourse](https://discourse.aurelia.io/) for community support
* Check [GitHub Issues](https://github.com/aurelia/aurelia/issues) for known issues

## Related Documentation

* [**Components**](https://docs.aurelia.io/components/components) - Build reusable UI components
* [**Essentials**](https://docs.aurelia.io/introduction/essentials) - Core Aurelia concepts
* [**Router**](https://docs.aurelia.io/getting-to-know-aurelia/aurelia-router/fundamentals/getting-started) - Navigation and routing
* [**Dependency Injection**](https://docs.aurelia.io/introduction/essentials/dependency-injection) - Share services between components