How to use the aurelia-framework.valueConverter function in aurelia-framework

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { split } from 'strman';

@valueConverter('split')
export class SplitValueConverter {
    public toView(value: string, separator: string, limit?: number): string[] {
        return split(value, separator, limit);
    }
}

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { leftTrim } from 'strman';

@valueConverter('lefttrim')
export class LeftTrimValueConverter {
    public toView(value: string, char?: string): string {
        return leftTrim(value, char);
    }
}

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { appendArray } from 'strman';

@valueConverter('appendarray')
export class AppendArrayValueConverter {
    public toView(value: string, append: string[]): string {
        return appendArray(value, append);
    }
}

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { removeNonWords } from 'strman';

@valueConverter('removenonwords')
export class RemoveNonWordsValueConverter {
    public toView(value: string, replaced?: string): string {
        return removeNonWords(value, replaced);
    }
}

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { isUpperCase } from 'strman';

@valueConverter('isuppercase')
export class IsUpperCaseValueConverter {
    public toView(value: string): boolean {
        return isUpperCase(value);
    }
}

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { slice } from 'strman';

@valueConverter('slice')
export class SliceValueConverter {
    public toView(value: string, beginSlice: number, endSlice: number): string {
        return slice(value, beginSlice, endSlice);
    }
}

import { valueConverter } from 'aurelia-framework';

// @ts-ignore
import { surround } from 'strman';

@valueConverter('surround')
export class SurroundValueConverter {
    public toView(value: string, substr: string, substrRight?: string): string {
        return surround(value, substr, substrRight);
    }
}

var UtcValueConverter = (function () {
    function UtcValueConverter() {
    }
    UtcValueConverter.prototype.toView = function (value) {
        return uiFormat.UIFormat.utcDate(value);
    };
    UtcValueConverter = _tslib.__decorate([
        aureliaFramework.valueConverter("utc")
    ], UtcValueConverter);
    return UtcValueConverter;
}());
var IsoValueConverter = (function () {

toView(value, country = "") {
        const phoneNumber = getPhone(value, country);
        return `<span class="ui-flag ${phoneNumber.country}"></span>&nbsp;${phoneNumber.formatInternational()}`;
    }
};
PhoneHtmlValueConverter = __decorate([
    valueConverter("phoneHtml")
], PhoneHtmlValueConverter);
let PhoneLocalHtmlValueConverter = class PhoneLocalHtmlValueConverter {
    toView(value, country = "us") {
        const phoneNumber = getPhone(value, country);
        return `<span class="ui-flag ${phoneNumber.country}"></span>&nbsp;${phoneNumber.formatNational()}`;
    }
};
PhoneLocalHtmlValueConverter = __decorate([
    valueConverter("phoneLocalHtml")
], PhoneLocalHtmlValueConverter);
let DateValueConverter = class DateValueConverter {
    toView(value, format) {
        return UIFormat.date(value, format);
    }
};
DateValueConverter = __decorate([
    valueConverter("date")
], DateValueConverter);
let TimeValueConverter = class TimeValueConverter {
    toView(value, format) {
        return UIFormat.time(value, format);
    }
};
TimeValueConverter = __decorate([
    valueConverter("time")

var TimeValueConverter = (function () {
    function TimeValueConverter() {
    }
    TimeValueConverter.prototype.toView = function (value, format) {
        return uiFormat.UIFormat.time(value, format);
    };
    TimeValueConverter = _tslib.__decorate([
        aureliaFramework.valueConverter("time")
    ], TimeValueConverter);
    return TimeValueConverter;
}());
var DatetimeValueConverter = (function () {