Aurelia - Refs

In this chapter, you will see some simple examples of Aurelia refs. You can use it to create a reference to a particular object. You can create a reference to elements or attributes, as seen in the following table.

Reference Table

Sr.No	Example & Description
1	ref = "myRef" Used for creating a reference to DOM element.
2	attribute-name.ref = "myRef" Used for creating a reference to custom attribute's view-model.
3	view-model.ref = "myRef Used for creating a reference to custom element's view-model.
4	view.ref = "myRef" Used for creating a reference to custom elements view instance.
5	rcontroller.ref = "myRef" Used for creating a reference to custom element's controller instance.

In the following example, we will create a reference to the input element. We will use the default class syntax as a view-model.

app.js

export class App { }

We are creating a reference to the input element by adding the ref = "name" attribute.

app.html

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>

When we run the app, we will see that the text entered into the input field is rendered on the screen.