Aurelia Components

In the previous article, we created our very first Aurelia application. In this lecture, we will be discussing Aurelia components.

Components are the basic building blocks of an Aurelia app. You may have already seen some from the examples on earlier articles. Basically, Aurelia components contain a pair of view-model and view. View-model is written in JavaScript and provides behavior to the view which is written in HTML. These two pieces are linked by Aurelia’s powerful data binding allowing dynamic changes between view-model and view.

The following examples are written in ES6 but can also be translated in TypeScript:

aurelia components

This is an example of a view-model of Aurelia components.

aurelia components

Then, the values of our view-model from MyComponent is now bound to the ${header} as our view. Same thing is applied to the content value.

aurelia components

When run, it should look something like shown above.

A very simple binding language is also available. Just type .bind to any HTML attribute in the DOM and Aurelia will bind it to the specified property in the view-model.

aurelia components

Data binding is usually flows in a one-way attribute. But there are options to control this by using: .one-way, .two-way or .one-time. One time renders the initial value of the property but doesn’t sync on thereafter. It’s just a convenient way to store a data memory that will not be changed.

You can also see a button that triggers a sayHello() method that is found in the view-model.

aurelia components

On the next tutorial article, we will discuss the Aurelia components lifecycle.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.