Aurelia - Components

Components are the main building blocks of Aurelia framework. In this chapter, you will learn how to create simple components.

Simple Component

As already discussed in the previous chapter, each component contains view-model which is written in JavaScript, and view written in HTML. You can see the following view-model definition. It is an ES6 example but you can also use TypeScript.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

We can bind our values to the view as shown in the following example. ${header}syntax will bind the defined header value from MyComponent. The same concept is applied for content.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

The above code will produce the following output.

Component Functions

If you want to update the header and footer when the user clicks the button, you can use the following example. This time we are defining header and footer inside EC6 class constructor.

app.js

export class App{  
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

We can add click.delegate() to connect updateContent() function with the button. More on this in one of our subsequent chapters.

app.html

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

When the button is clicked, the header and content will be updated.