Tutorial by Examples

Creating a Custom Element with bindable properties is a snap. If you want to create an element that accepts one or more values which the plugin can use, the @bindable decorator and syntax is what you are looking for. Below, we are creating a custom element that accepts an array of fruits and displa...

In the following, we are creating an example of an Aurelia Custom Element which will allow you to display Youtube videos via their video ID. An Aurelia Custom Element can be defined in two different ways: the first one is by creating a viewmodel and accompanying view, the second one is by just cre...

A basic custom element is created in Aurelia based on naming conventions, by simply adding the suffix CustomElement to the name of a class. This suffix will automatically be stripped out by Aurelia. The remaining part of the class name will be lowercased and separated using a hyphen and can then be ...

In most examples, the class naming convention is used to define an Aurelia Custom Element. However, Aurelia also provides a decorator that can be used to decorate a class. The class is again treated as a custom element by Aurelia then. The value supplied to the decorator becomes the name of the cus...

A Custom Element consisting of Javascript only includes the corresponding HTML view within the @inlineView decorator of Aurelia. The following example takes two bindable paramters, a prename and a surename, and display both within a predefined sentence. Example: my-element.js import { bindable, c...