Aurelia - Custom Elements


Aurelia offers a way to add components dynamically. You can reuse a single component on different parts of your app without the need to include HTML multiple times. In this chapter, you will learn how to achieve this.

Step 1 - Create the Custom Component

Let's create new components directory inside src folder.

C:\Users\username\Desktop\aureliaApp\src>mkdir components

Inside this directory, we will create custom-component.html. This component will be inserted later in the HTML page.


   <p>This is some text from dynamic component...</p>

Step 2 - Create the Main Component

We will create simple component in app.js. It will be used to render header and footer text on screen.


export class MyComponent {
   header = "This is Header";
   content = "This is content";

Step 3 - Add the Custom Component

Inside our app.html file, we need to require the custom-component.html to be able to insert it dynamically. Once we do that, we can add a new element custom-component.


   <require from = "./components/custom-component.html"></require>


Following is the output. Header and Footer text is rendered from myComponent inside app.js. The additional text is rendered from the custom-component.js.

Aurelia Custom Elements Example