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:UsersusernameDesktopaureliaAppsrc>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.