Creation of Custom Elements in Aurelia

Introduction

For componentizing an application dynamically, Aurelia use Custom Elements. This helps to reuse the single component in various parts of the Web Application. In this article, we will look into the usage of the same.

Aurelia - Project Setup

Create a folder say AureliaExperiment at your favorite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

Straight to Experiment

Now inside the src folder, let's create a folder say MyCustomElements. And inside the MyCustomElements, let's create a mycustom-component.html whose content will be as under

<template>
   <table border="1">
   		<tr>
   			<td>Name:</td>
   			<td><input type="text" value="RNA Team"></td>
   		</tr>
   	</table>
   <p>This is a Custom Element</p>
</template>

Now, let us first create the app.js file inside the src folder and write the below

app.js
---------
export class MyComponent {
	constructor() {
   this.title = "This is a demo for Creation of Custom Elements in Aurelia";
   this.footer = "Happy Learning Aurelia";
 }
}

It is the model. The title and footer are the properties that we will bind to our view. The Constructor method is used for initializing object created inside a class.

Now, let us create the view which is app.html file inside the src folder and write the below

app.html
--------
<template>
   <require from = "./MyCustomElements/mycustom-component.html"></require>

   <h1>${title}</h1>

   <mycustom-component></mycustom-component>
   
   <p>${footer}</p>
   
</template>

The title and footer properties are bound to the HTML template by using ${title} and ${footer} syntax. Also we have added our Custom Element inside the template.

Now create the main.js file inside the src folder

main.js
---------
export function configure(aurelia) {
  aurelia.use.basicConfiguration();
  aurelia.start().then(() => aurelia.setRoot());
}

This tells Aurelia to configure itself by exporting a configure method using the basicConfiguration. The setRoot method is the root of the UI component tree that Aurelia needs to render.

Run the application

1. First way

Open the index.html file in Firefox

2. Second way

First install web server from command prompt window.

npm install http-server -g

and then start the web server

http-server -o -c-1

Reference

Conclusion

In this article we have learnt the creation and usage of Custom Elements in Aurelia. Hope this will be useful. Thanks for reading. Zipped file attached.