aurelia Javascript Only Custom Element


Example

A Custom Element consisting of Javascript only includes the corresponding HTML view within the @inlineView decorator of Aurelia.

The following example takes two bindable paramters, a prename and a surename, and display both within a predefined sentence.

Example: my-element.js

import { bindable, customElement, inlineView } from 'aurelia-framework';

@customElement('greeter')
@inlineView(`
  <template>
    <b>Hello, \${prename} \${surename}.</b>
  </template>
`)
export class Greeter {
  @bindable prename;
  @bindable surename;
}

Using it:

<template>
  <require from="./greeter"></require>
  <greeter prename="Michael" surename="Mueller"></greeter>
</template>

This will output "Hello, Michael Mueller." in the browser's window.