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.

custom-component.html

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

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.

app.js

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.

app.html

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

   <h1>${header}</h1>
   <p>${content}</p>
   <custom-component></custom-component>
</template>

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.