Bitcoin
${prices.bitcoin.usd}
Ethereum
${prices.ethereum.usd}
Tether
${prices.tether.usd}
Binance Coin
${prices.binancecoin.usd}
Dogecoin
${prices.dogecoin.usd}
Cardano
${prices.cardano.usd}
Ripple
${prices.ripple.usd}
```
This will look familiar if you have brushed up on Aurelia's template syntax. We are using interpolation to display values, but do you notice something? Prices are the object we defined inside of our view model. We are then accessing each property of this object inside of the view.
We know that the value inside of `${}` is evaluated by Aurelia. In this instance, we are referencing our `prices` object and we know for each cryptocurrency we are watching that it returns a property followed by another child property for the price called `usd`.
## Updating the data
We have a working application of sorts. It's not pretty, but it's functional. We have a problem, though. Any price updates after the page loads won't be rendered. Because these are price values, we want to ensure the user always has the most up-to-date information. We need to tell our view model to update the prices for us regularly.
```typescript
priceUpdate() {
setInterval(async () => {
this.prices = await this.api.getPrices(config.coins);
}, 1000);
}
```
And add the `priceUpdate()` call to binding function.
```typescript
async binding() {
this.prices = await this.api.getPrices(config.coins);
this.priceUpdate();
}
```
We poll the Coingecko API every second to update prices and store them in the `prices` object. If these prices change, they are updated in the view because everything is reactively bound. Aurelia is watching this object and the properties we've bound to in our view. We use a basic `setInterval` to poll the server continuously. Feel free to adjust the frequency.
## Seeing what we have so far
We have the basis of a functional web application that we can now run. Open up a Command Prompt/Terminal window and navigate to your project directory, then run the `start` command:
```
npm run start
```
This will run the Aurelia development server, and a browser window/tab should open with your application running on the default port `9000`. Provided the Coingecko API is working, you should see unformatted prices in the view.
## Making currencies look pretty using a value converter
You might have noticed our prices are displayed, but they're not formatted. At the time of this tutorial, the price of 1 Bitcoin was USD 34,354.00. However, it is being displayed without currency formatting as 34354.
So, now we will create a value converter using the [Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) to format our currency values as properly formed values in our view.
Inside of `src` create a new folder called `resources` and then inside of `resources` another folder called `value-converters`. It is best practice to have your resources inside a resources/components folder like this. Create a new file called `currency-value-converter.ts`.
You can read about value converters [here](https://docs.aurelia.io/templates/value-converters) to understand what this value converter is doing.
```typescript
import { valueConverter } from '@aurelia/runtime-html';
@valueConverter('currency')
export class CurrencyValueConverter {
toView(value) {
if (!value) {
return value;
}
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
return formatter.format(value);
}
}
```
We will not be going into detail about the [Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl). Still, it is highly recommended you read up on it as this is intended to be the standard way to work with dates, times, currencies and other types of localization data on the web.
### Import and use our new value converter
To use this, we have to register it with [Dependency Injection](https://docs.aurelia.io/getting-to-know-aurelia/services-and-runtime-hooks/dependency-injection/dependency-injection-di). This tells Aurelia our value converter exists, and we have several options. In this tutorial, we will be including it from within our view using the `import` element, but you can also register it inside of the view model or globally inside of `main.ts`.
If you want to learn about other ways you can inject dependencies, consult the documentation on components.
Open up `my-app.html` again and add in the following:
```html
Bitcoin
${prices.bitcoin.usd | currency}
Ethereum
${prices.ethereum.usd | currency}
Tether
${prices.tether.usd | currency}
Binance Coin
${prices.binancecoin.usd | currency}
Dogecoin
${prices.dogecoin.usd | currency}
Cardano
${prices.cardano.usd | currency}
Ripple
${prices.ripple.usd | currency}
```
This looks the same as earlier, except we are importing our new value converter. You might also notice we are using the value converter syntax with a pipe `|` followed by `currency` which is the name of our value converter.
The app should automatically refresh with the new changes if you still have the app running. You should now see properly formatted currency values (complete with a dollar sign and thousand separators).
## Styling it with Bootstrap
We could have ended the tutorial in the previous step, but aren't you itching to make it look nicer? Using Bootstrap 5 and some simple markup, we can.
To install Bootstrap in the project directory run `npm install bootstrap`
### Configuring Shared Styles for Shadow DOM
Unlike conventional web applications, we use Shadow DOM to keep styles encapsulated. You must make them shared styles when working with third-party global CSS libraries like Bootstrap.
Fortunately, Aurelia already helps cater for this in your apps. Inside of `main.ts` you will notice some commented-out code and notes talking about shared styles.
We need to import Bootstrap's CSS first at the top of the file:
```typescript
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
```
Now, uncomment the `.register` code already present in `main.ts`. Also, make sure you replaced `shared` with `bootstrap` and uncomment the `StyleConfiguration` import from the `aurelia` package at the top as well.
Your `main.ts` file should look pretty much identical to this one:
```typescript
import Aurelia, { StyleConfiguration } from 'aurelia';
import { MyApp } from './my-app';
import bootstrap from 'bootstrap/dist/css/bootstrap.css';
Aurelia
.register(StyleConfiguration.shadowDOM({
// optionally add the shared styles for all components
sharedStyles: [bootstrap]
}))
.app(MyApp)
.start();
```
This now injects Bootstrap styles into all of our Shadow DOM components. The only downside is the global styles targeting elements like `html` or `body` do not get carried over (an intentional limitation of Shadow DOM).
However, you can fix this by adding the Bootstrap CSS into the header of our `index.html` if you want those. Or, you can add them yourself. If you want them, add the Bootstrap CDN include in the header of `index.html`. You can get the most up-to-date style include [here](https://getbootstrap.com/docs/5.0/getting-started/introduction/).
```html