Value converters

Writing custom value converters, with at look at some typical value converters

First check out these value converter samples

Creating your own

The Aurelia CLI comes with various generators, including one for value converters.

au generate will list the generators available

value-converter - Creates a value converter class and places it in the project resources.

$ au generate value-converter <name>

Day name converter

Let's create date-day-name converter

$ au generate value-converter date-day-name

We will use momentjs as the Date utility library.

Create a date-day-name.ts file in /src

import * as moment from 'moment';

export class DayNameValueConverter {
    toView(value) {
        return  moment(value).format('dddd');
    }

The toView method to converts the value passed in for display to the view.

Testing the converter

We can test it like this:

showdate.ts VM

export class ShowDate {
  date: string = 'December 17, 1995 03:24:00';
}

showdate.html template

<template>
 <require from="./resources/value-converters/date-day-name"></require>
 <h1 textContent.bind="date | dayName">Sunday</h1>
</template>

Alternatively you can make the value converter global and drop the <require> as described in the chapter Smart resources.

Bi-directional converter

You can make the converter bi-directional, by adding a fromView method. Here we set the week of the day, using the day(weekDay) setter, then convert to a Javascript Date via toDate().

export class DayNameValueConverter {
  fromView(value) {
    return  moment(value).day(value).toDate();
  }

Locales

To use a different locale, simply configure it from main.ts or wherever you control your locale and similar configurations (such as from a custom locale selector element?)

import 'moment/locale/pt-br';
moment.locale('pt-BR');

results matching ""

    No results matching ""