Creation of Custom Elements in Aurelia

Rajnilari2015
Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 397 red flag
Rating: 5 out of 5  
 1 vote(s)

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.


 Download source code for Creation of Custom Elements in Aurelia

Recommendation
Read Bind Dropdown in Aurelia before this article.

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

Templating: Custom Elements Basics

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.

Recommendation
Read Bind MultiSelect listbox in Aurelia after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)