Aurelia Plus is a collection of common use case tools for use in Aurelia applications.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Aurelia Plus

Aurelia Plus is a collection of common use case tools for use in Aurelia applications.

Table of Contents



jspm install aurelia-plus


To begin using Aurelia Plus, load the plugin in your Aurelia's main file.

export function configure(aurelia) {

If you'd rather only include specific components, you can instead require those specific components individually.

<require from="aurelia-plus/upload-custom-element"></require>

<upload file.bind="file">Upload</upload>

You can also select specific components to globalize.

export function configure(aurelia) {

The module name for each component is listed below.

Upload Custom Element

Module Name: aurelia-plus/upload-custom-element

The native html <input type="file" /> element looks like a button, but it has quirky behavior and doesn't behave like a normal button. The upload custom element adds an <upload> element that looks and behaves like a button and opens file select dialog.


  • file [Default: two-way] The selected file.


<upload file.bind="file1">Upload</upload>
<upload class="btn ${file2 ? 'btn-success' : 'btn-primary'}" style="margin-left: 4px;" file.bind="file2">Upload</upload>
<upload file.bind="file3">Upload</upload><span if.bind="file3"> ${} selected</span>

Working examples:

Type="number" Custom Attribute

Module Name: aurelia-plus/type-custom-attribute

The type custom attribute will automatically return JavaScript number values from HTML type="number" inputs.


<input type="number" value.bind="value" />

Working examples:

Filter Value Converter

Module Name: aurelia-plus/filter-value-converter

The filter value converter provides a number of powerful tools for filtering arrays covering many common use cases.


  • value (any | any[]) [Required] The value or values to filter with.

  • on (string | string[]) [Default: this] Property or properties to filter on. If no property is given, the filter is performed on the object itself.

  • strict (boolean) [Default: false] Specifies whether all values passed to value must match. The default behavior is to find any matches.

  • mode (string | function) [Default: 'contains'] Specifies what function to use when filtering. Any of the following predefined filters can be referenced by key, or a (value, item) => boolean function can be passed:

    • 'exact': Matches identical strings, ignoring casing.
    • 'startsWith': Matches strings starting with the search term, ignoring casing.
    • 'endsWith': Matches strings ending with the search term, ignoring casing.
    • 'contains': Matches strings containing the search term, ignoring casing.
    • '>=': Matches properties that evaluate to >= searchTerm in JavaScript.
    • '>': Matches properties that evaluate to > searchTerm in JavaScript.
    • '<=': Matches properties that evaluate to <= searchTerm in JavaScript.
    • '<': Matches properties that evaluate to < searchTerm in JavaScript.
    • '==': Matches properties that evaluate to == searchTerm in JavaScript.
    • (value, item) => boolean: If a function is passed, then it is applied to the value and each item. If it returns true the item is considered a match.

Full documentation:


<input type="search" value.bind="title" />
<ul><li repeat.for="game of games | filter: { on: 'title', value: title }">${game.title}/li><ul>

<input type="search" value.bind="name" />
<input type="checkbox" checked.bind="party" value="Republican" />Republican
<input type="checkbox" checked.bind="party" value="Democrat" />Democrat
<input type="date" value.bind="from" />
  <li repeat.for="president of presidents 
      | filter: { on: ['first', 'last'], value: name } 
      | filter: { on: 'party', value: party }
      | filter: { on: 'start', value: from, mode: '>='">
    ${president.first} ${president.last}

Working examples:

Number Value Converter

Module Name: aurelia-plus/number-value-converter

The number value converter returns a JavaScript number from an input. This is identical to the behavior of the type custom attribute but in the form of a value converter.


<require from="aurelia-plus/number-value-converter"></require>

<input value.bind="value | number" />

Working examples:

JSON Value Converter

Module Name: aurelia-plus/json-value-converter

The JSON value converter converts a value into JSON.


  • Pretty (boolean) [Default: false] Whether or not to prettify the JSON.


<pre repeat.for="state of states">${state | json}</pre>
<pre>${states | json:true}</pre>

Working examples:

Date/Time Value Converters

Module Name: aurelia-plus/date-time-value-converter

The date/time value converters attempt to parse a value as a Date and return a locale string.


  • DateValueConverter Calls .toLocaleDateString().

  • TimeValueConverter Calls .toLocaleTimeString().

  • DateTimeValueConverter Calls .toLocaleString().


<input type="datetime-local" value.bind="date" />
date: ${date | date} <!-- 12/1/2017 -->
time: ${date | time} <!-- 1:58:34 PM -->
dateTime: ${date | dateTime} <!-- 12/1/2017, 1:58:34 PM -->

Working examples:

Split Value Converter

Module Name: aurelia-plus/split-value-converter

The split value converter is a two way value converter that splits text from the view into an array in the view-model and joins an array from the view-model back into a string in the view. This is particularly useful for searching where you may want tokenize an input.


  • Token (string) [Default: ' '] String to split the string by.


<input type="search" value.bind="searches1 | split" />
<input type="search" value.bind="searches2 | split: ' OR '" />

Working examples:

JavaScript Globals

Module Name: aurelia-plus/globals-view-engine-hooks

This view engine hook adds the JavaScript globals Array, Object, JSON, Date, Math, Number, RegExp, and Reflect to the view giving an development experience closer to a JavaScript console.


<require from="aurelia-plus/globals-view-engine-hooks"></require>

<div repeat.for="key of Object.keys(obj1)"></div>
<div if.bind="!Reflect.has(obj1, 'three')">Three is missing!</div>
<pre>${JSON.stringify(obj2, null, 2)}</pre>
<ul if.bind="Array.isArray(obj3)">
  <li repeat.for="item of obj3">${item}</li>
<p>cos(π/2) = ${Math.cos(Math.PI / 2)} <span if.bind="Math.cos(Math.PI / 2) < Number.EPSILON">≅ 0</span></p>
<div if.bind="RegExp('good').test(obj4)">Success!</div>

Working examples:

Refresh Binding Behavior

Module Name: aurelia-plus/refresh-binding-behavior

This binding behavior forces the view to refresh. This is useful when you want to display data that Aurelia doesn't know how to observe, such as functions of arbitrary objects or non-configurable properties.


  • Refresh Rate (number) [Default: 100] Specifies how often the view should be refreshed in ms.


<require from="aurelia-plus/refresh-binding-behavior"></require>

  <b>60 fps</b>
  <pre>${JSON.stringify(rapidlyChangingObject) & refresh: 16}</pre>
  <b>10 fps (default):</b>
  <pre>${JSON.stringify(normalObject) & refresh}</pre>
  <b>5 fps:</b>
  <pre>${JSON.stringify(extremelyLargeObject) & refresh:1000}</pre>

Working examples: