Aurelia Custom Attributes Part 1

In the last post, we went through dependency injections. In this tutorial article, we will talk about Aurelia custom attributes.

Aurelia custom attributes are similar to value converters, binding behaviors or custom elements. They are a category of view source. Custom attributes have the ability to add or alter the behavior of any DOM element.

Aurelia has simple APIs that creates custom attributes of all types accompanied by strong databinding capabilities that only requires it to be added to a DOM element or set a required value for its attributes. It may be simple value or complex set of options.

Now let’s try to create an example. As said earlier, a custom attribute is able to alter the behavior of an element simply by adding it to the element.

custom attributes

In this example, we made the HTML to display a 100 pixel square with a red background. Note that the attribute class name is RedSquareCustomAttribute and is contained with Aurelia convention. The class is in “init caps” format so Aurelia converts it to “dash-case” to use in HTML thus becomes red-square. 

You also have the option to override the default naming system by the use of @customAttribute decorator. Provide the exact desired name the your custom attribute just like the example below.

custom attributes

Note that Aurelia does not utilize the conversion from ‘init caps’ to ‘dash-case’ when this decorator is used. The exact value from the decorator is passed.

On the second part of this Custom Attribute series, we will talk about the three supported types of binding of an Aurelia custom attribute.

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.