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.

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

custom-component.html

This is some text from dynamic component...

 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

${header}

${content}

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.

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

custom-component.html

This is some text from dynamic component...

 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

${header}

${content}