Getting Started
28 Nov 20164 minutes to read
This section helps to understand the getting started of the Aurelia CurrencyTextbox with the step-by-step instructions.
Create an CurrencyTextbox
You can create an Aurelia application and add necessary scripts and styles with the help of the given Aurelia Getting Started Documentation.
We already configured a template project in GitHub repository syncfusion-template-repository. Run the below set of commands to clone the repository and install the required packages for Syncfusion Aurelia application.
> git clone "https://github.com/aurelia-ui-toolkits/syncfusion-template-repository"
> cd syncfusion-template-repository
> npm install
> jspm install
The below steps describes to create Syncfusion Aurelia CurrencyTextbox component.
- Create
currencytextbox
folder insidesrc/samples/
location. - Create
currencytextbox.html
file insidesrc/samples/currencytextbox
folder and use the below code example to render the CurrencyTextbox component.
<template>
<input id="currency" type="text" ej-currency-textbox="e-value.bind:currencyValue;e-width.bind:cwidth" />
</template>
- Create
currencytextbox.js
file with the below code snippet insidesrc/samples/currencytextbox
folder.
export class Default {
constructor() {
this.currencyValue = 500;
this.cwidth = '100%';
}
}
- Now, we are going to configure the navigation for created Textbox sample in
src/app.js
file.
export class App {
configureRouter(config, router) {
config.title = 'Aurelia Syncfusion';
config.map([
{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome',
nav: true, title: 'Welcome' },
{ route: 'child-router', name: 'child-router', moduleId: 'child-router',
nav: true, title: 'Child Router' },
{ route: 'button', name: 'button', moduleId: 'samples/button/button',
nav: true, title: 'Button' },
{ route: 'currencytextbox', name: 'currencytextbox', moduleId: 'samples/currencytextbox/currencytextbox',
nav: true, title: 'CurrencyTextbox' }
]);
this.router = router;
}
}
- To run the application, execute the following command.
gulp watch
Execution of above code will render the following output.
Set Min and Max Values
You can set the “minValue” and “maxValue” in Currency text boxes for maintaining the range in Textboxes widgets. In this scenario, you have to enter the values between the given ranges. The following code example illustrates how to achieve this.
<template>
<input id="currency" type="text" ej-currency-textbox="e-value.bind:cValue;e-min-value.bind:minvalue;e-max-value.bind:maxvalue" />
</template>
export class Default {
constructor() {
this.cvalue = 500;
this.minvalue = 30;
this.maxvalue = 1000;
}
}