Aurelia - Custom Elements

Aurelia offers a way to add components dynamically. You can reuse single component on different pars of your app without need for including HTML multiple times. This chapter will explain how to achieve this.

Step 1 - Create 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 on our HTML page.

custom-component.html

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

Step 2 - Create 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 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 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>

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