Aurelia Templates

In the previous article, we discussed the Aurelia components lifecycle. In this post, we will talk about Aurelia templates.

Aurelia has a template system that is easy to learn yet potent enough to build even the most complicated applications. This article aims to guide you through the creation of a static Aurelia template, importing templates to parent templates, binding and manipulation of data within a view-model, and use of conditionals, repeaters and events.

Let’s start with a simple template. All Aurelia templates should be wrapped with a <template> element.

aurelia templates

This just prints a “Hello, World!” to your application. Aurelia templates are working as a view-model of our application. So let’s further customize our template to show a name.

aurelia templates

A name Joseph is initialized then bound the name property in the view-model template using Aurelia string interpolation (${}).

Now let’s try another example named greeter. This will show how to insert a little bit of our expression with Aurelia templates.

aurelia templates

In our template, the property arriving checks the value if true or false. True shows the ‘Hello’ and False shows ‘Goodbye’.

aurelia templates

Then the view-model initially sets the arriving value to true then changes it to false after 5000 millisecond or simply 5 seconds. So when you run the template, ‘Hello Joseph’ will appear then 5 seconds later it will show ‘Goodbye Joseph’.

On the next section, we will go through dependency injections.

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.