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.

Kickstart Your Career

Get certified by completing the course

Get Started