# Cheat Sheet
## Cheat Sheet
A quick reference for different aspects of Aurelia with minimal explanation.
## Bootstrapping
### Simple
**src/main.ts**
```typescript
import au from 'aurelia';
import { AppRoot } from './app-root';
await au.app({
component: AppRoot,
host: document.querySelector('app-root'),
}).start();
```
### Script tag (Vanilla JS)
Note: you can copy-paste the markup below into an html file and open it directly in the browser. There is no need for any tooling for this example.
**index.html**
```html
```
### Script tag (Vanilla JS - enhance)
Note: you can copy-paste the markup below into an html file and open it directly in the browser. There is no need for any tooling for this example.
**index.html**
```html
${title}
${message}
```
### Multi-root
Note: the sample below mainly demonstrates stopping an existing instance of Aurelia and starting a new one with a different root and host. Do not consider this a complete example of a proper way to separate a private app root from public view, which is a topic of its own.
**src/main.ts**
```typescript
import au from 'aurelia';
import { LoginWall } from './login-wall';
await au.app({
component: LoginWall,
host: document.querySelector('login-wall'),
}).start();
```
**src/login-wall.ts**
```typescript
import au from 'aurelia';
import { AppRoot } from './app-root';
export class LoginWall {
constructor(private au: Aurelia) {}
async login() {
await this.au.stop();
await au.app({
component: AppRoot,
host: document.querySelector('app-root'),
}).start();
}
}
```
### Advanced (low-level)
When you need more control over the wireup and/or want to override some of the defaults wrapped by the 'aurelia' package and/or maximize tree-shaking of unused parts of the framework:
```typescript
import { DI, Registration } from '@aurelia/kernel';
import {
Aurelia,
ITemplateCompilerRegistration,
INodeObserverLocatorRegistration,
DebounceBindingBehaviorRegistration,
OneTimeBindingBehaviorRegistration,
IfRegistration,
ElseRegistration,
RepeatRegistration,
RefAttributePatternRegistration,
DotSeparatedAttributePatternRegistration,
DefaultBindingCommandRegistration,
OneTimeBindingCommandRegistration,
FromViewBindingCommandRegistration,
ToViewBindingCommandRegistration,
TwoWayBindingCommandRegistration,
ForBindingCommandRegistration,
TriggerBindingCommandRegistration,
PropertyBindingRenderer,
IteratorBindingRenderer,
RefBindingRenderer,
CustomElementRenderer,
TemplateControllerRenderer,
ListenerBindingRenderer,
TextBindingRenderer,
} from '@aurelia/runtime-html';
import { BrowserPlatform } from '@aurelia/platform-browser';
import { AppRoot } from './app-root';
const container = DI.createContainer();
container.register(
Registration.instance(IPlatform, BrowserPlatform.getOrCreate(globalThis)),
// Default framework components
ITemplateCompilerRegistration,
INodeObserverLocatorRegistration,
// Commonly used framework resources (only a small selection)
DebounceBindingBehaviorRegistration, // &debounce
OneTimeBindingBehaviorRegistration, // &oneTime
IfRegistration, // if (if.bind)
ElseRegistration, // else
RepeatRegistration, // repeat (repeat.for)
// Aurelia binding syntax
RefAttributePatternRegistration, // ref
DotSeparatedAttributePatternRegistration, // target.command (e.g. value.two-way, if.bind)
// Commonly used Aurelia binding commands (only a small selection)
DefaultBindingCommandRegistration, // .bind
OneTimeBindingCommandRegistration, // .one-time
FromViewBindingCommandRegistration, // .from-view
ToViewBindingCommandRegistration, // .to-view
TwoWayBindingCommandRegistration, // .two-way
ForBindingCommandRegistration, // .for
TriggerBindingCommandRegistration, // .trigger
// Commonly used Aurelia renderers (only a small selection)
PropertyBindingRenderer, // .bind, .one-time, .to-view, .from-view, .two-way bindings
IteratorBindingRenderer, // .for bindings
RefBindingRenderer, // ref bindings
CustomElementRenderer, // custom element hydration
TemplateControllerRenderer, // template controller hydration (if, repeat)
ListenerBindingRenderer, // .trigger, .capture bindings
TextBindingRenderer, // ${} text bindings
);
await new Aurelia(container).app({
component: AppRoot,
host: document.querySelector('app-root'),
}).start();
```
## Custom elements
### With conventions
```typescript
import { bindable, IHttpClient } from 'aurelia';
export class ProductDetailCustomElement {
static dependencies = [ImageViewerCustomElement, CurrencyValueConverter];
static containerless = true;
@bindable product: Product;
constructor(@IHttpClient readonly http: IHttpClient) {}
}
```
### Without conventions
```typescript
import { customElement, bindable, IHttpClient } from 'aurelia';
import template from './product-detail.html';
@customElement({
name: 'product-detail',
template,
dependencies: [ImageViewerCustomElement, CurrencyValueConverter],
shadowOptions: { mode: 'open' },
})
export class ProductDetail {
@bindable product: Product;
constructor(@IHttpClient readonly http: IHttpClient) {}
}
```
### Vanilla JS
```typescript
import { CustomElement, IHttpClient } from 'aurelia';
export const ProductDetail = CustomElement.define({
name: 'product-detail',
template: '...
',
dependencies: [ImageViewerCustomElement, CurrencyValueConverter],
shadowOptions: { mode: 'open' },
bindables: ['product'],
}, class {
static inject = [IHttpClient];
constructor(http) { this.http = http; }
});
```
## Custom attributes
### With conventions
```typescript
import { bindable } from 'aurelia';
export class RippleCustomAttribute {
@bindable color: string;
}
```
### Without conventions
```typescript
import { bindable, customAttribute } from 'aurelia';
@customAttribute('ripple')
export class Ripple {
@bindable color: string;
}
```
### Vanilla JS
```typescript
import { CustomAttribute } from 'aurelia';
export const Ripple = CustomAttribute.define({
name: 'ripple',
bindables: ['color'],
}, class {
});
```
## Template controllers
### With conventions
```typescript
import { IViewFactory, IRenderLocation, ISyntheticView } from 'aurelia';
export class NoopTemplateController {
view: ISyntheticView;
constructor(
@IViewFactory factory: IViewFactory,
@IRenderLocation location: IRenderLocation,
) {
this.view = factory.create().setLocation(location);
}
}
```
### Without conventions
```typescript
import { templateController, IViewFactory, IRenderLocation, ISyntheticView } from 'aurelia';
@templateController('noop')
export class Noop {
view: ISyntheticView;
constructor(
@IViewFactory factory: IViewFactory,
@IRenderLocation location: IRenderLocation,
) {
this.view = factory.create().setLocation(location);
}
}
```
### Vanilla JS
```typescript
import { CustomAttribute, IViewFactory, IRenderLocation } from 'aurelia';
export const Noop = CustomAttribute.define({
name: 'noop',
isTemplateController: true,
}, class {
static inject = [IViewFactory, IRenderLocation];
constructor(factory, location) {
this.view = factory.create().setLocation(location);
}
});
```
## Binding behaviors
### With conventions
```typescript
import { ILogger } from 'aurelia';
export class LogBindingBehavior {
constructor(
@ILogger readonly logger: ILogger,
) {}
bind(...args) {
this.logger.debug('bind', ...args);
}
unbind(...args) {
this.logger.debug('unbind', ...args);
}
}
```
### Without conventions
```typescript
import { ILogger, bindingBehavior } from 'aurelia';
@bindingBehavior('log')
export class Log {
constructor(
@ILogger readonly logger: ILogger,
) {}
bind(...args) {
this.logger.debug('bind', ...args);
}
unbind(...args) {
this.logger.debug('unbind', ...args);
}
}
```
### Vanilla JS
```typescript
import { ILogger, BindingBehavior } from 'aurelia';
export const Log = BindingBehavior.define({
name: 'log',
}, class {
static inject = [ILogger];
constructor(logger) { this.logger = logger; }
bind(...args) {
this.logger.debug('bind', ...args);
}
unbind(...args) {
this.logger.debug('unbind', ...args);
}
});
```
## Value converters
### With conventions
```typescript
export class JsonValueConverter {
toView(value) {
return JSON.stringify(value);
}
}
```
### Without conventions
```typescript
import { valueConverter } from 'aurelia';
@valueConverter('json')
export class Json {
toView(value) {
return JSON.stringify(value);
}
}
```
### Vanilla JS
```typescript
import { ValueConverter } from 'aurelia';
export const Json = ValueConverter.define({
name: 'json',
}, class {
toView(value) {
return JSON.stringify(value);
}
});
```
## Attribute patterns
```typescript
@attributePattern({ pattern: '[(PART)]', symbols: '[()]' })
export class BananaInBox {
'[(PART)]'(rawName: string, rawValue: string, parts: string[]): AttrSyntax {
return new AttrSyntax(rawName, rawValue, parts[0], 'two-way');
}
}
```
## Binding commands / instruction renderer
## Templating syntax
```html
Hello, ${firstName} ${lastName}