Building a Trading App in Angular: Currency Screener

This is part 3 of a series of posts by CoderIQ (coderiq.io) to take you from an Angular noob to expert in a matter of 3 small projects. Check out our app (app.coderiq.io) and feel free to build a software portfolio

This post is about building a trading app with Angular based on User Requirements. Our aim is to improve our Front End development skills. Part 2 introduces these concepts in a more beginner-friendly way, and it is recommended that you read that before reading this.

Building a Trading App in Angular: MovAvg

Angular

Angular is a JavaScript library for building user interfaces. It provides a concise approach to structuring our application in terms of components and handles communication among these components. Angular handles updating our components when its data change, making it easy to reason about our application and focus on implementing business requirements.

What you will learn

1. Implement HTTP requests to fetch data from given services
2. Implement a centralized data service
3. Implement Charts in an application
4. Implement charts using data from a Web Socket
5. Multi-level Angular component application
6. Show loading spinner when application data is loading

Currency Screener

A moving average (MA) is a widely used indicator in technical analysis that helps smooth out price action by filtering out the noise from random price fluctuations. It is a trend-following, or lagging, indicator because it is based on past prices. The moving average is calculated over a period of time or certain number of past ticks/prices and is compared with the current tick/price. We want to create a screen that easily helps us in making buy/sell decisions for a set of FX currencies.

Here we will display average currencies using charts.

Requirements For Currency Screener

Building on our project from the previous post, we are going to implement a more complicated user requirement, called the currency screener. Here is a detailed description of the requirements we are given:

1. Fetching from an API (https://restsimulator.coderiq.io/currency_pairs), display in a dropdown the list of available currencies.

2. User should be able to submit his selected options. Once submitted, establish a connection to a Websocket (wss://stocksimulator.coderiq.io) by sending a json message of the form {"currencyPair":"EURUSD"} if EURUSD was selected from the currencies.

3. Once you start receiving the prices from the Web socket one by one, if the new tick is greater than the previous tick, then display the new tick and an up arrow in green. Otherwise, display the new tick and a down arrow in red.

4. Display currency data using a chart visualization.

Prerequisite

To follow this tutorial, you’ll need the following:

1. Node.js version 10.16.0 installed on your computer. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.
2. It will also help to have a basic understanding of JavaScript, which you can find in the How To Code in JavaScript series, along with a basic knowledge of HTML and CSS.

Creating a new Angular application

To create a new application, run the following command:

$ ng new currencyscreener
$ cd currencyscreener
$ ng serve --open

For more details about creating a new angular project, the official angular website has a detailed guide.

To understand the file structure of a new angular application, we recommend you go through this documentation provided by angular

https://angular.io/guide/file-structure

You can view your app from: http://localhost:4200

If you would like a more detailed skeleton, you can also download CoderIQ’s (app.coderiq.io) starter code using the ‘Download Training Module’ button on our app.

Go ahead and open your project in your preferred text editor.

Thinking in Components

The first thing we are going to do is understand the requirements and decompose it into a set of component-hierarchy to be implemented later.

As in our previous posts, our component is going to fetch data from a REST endpoint and display the data using charts. Why do we need an app server?

As we are going to see, we are going to display multiple charts at a time, we don’t want the user to be able to select a currency if it has already been selected in another chart.

Shared Data Through A Service

We have already seen in previous articles how to retrieve data from an external source and use that data in a component. We also saw how to pass down data to child components using component properties.

When working on a large application however, multiple components (particularly sibling components) might depend on the same data and changes on the data in one component might need to be reflected in another component. Since multiple components will request for a centralized data and needs to be notified when this data changes, we need a standard library that implements this functionality for us. In Angular, this is implemented through a shared service.

Sequence Diagram

Let’s see the various processes of our components:

Implement Components in Angular

Angular is a component-based library. This allows us to transfer our component design directly into Angular components. We will create a component for each component we have discussed so far.

Before we go on to implement the various components. Let’s set up some models and utility functions that our component will need.

Create a folder models in your app folder with the file Currency.ts.

app/models/Currency.ts

Also create folder utils. And create a file with name utils.ts.

app/utils/utils.ts

We have the various utility files out of the way.

To start with, update the content of your app.component.ts with the following:

• In our app component, make use of a service to retrieve the list of currency pairs.

Also update its app.component.css.

And then its html markup with the following content: app.component.html

• Create a listing of four components that will display the currently selected currencies.

This completes the implementation of our app component. Going forward from here we will not be sharing any more code snippets.

Let us implement the component for each chart component. The currency component.

Create the currency.component.html

• We create a select component that will allow the user to change the currency for the component.
• We create a chart component whose data is bound to a data from a web socket connection.

And then set up the typescript component, currency.component.ts.

currency.component.ts

• When the component is created and initialized, create a Web Socket connection to the web socket endpoint wss://stocksimulator.coderiq.io
• After connection is established send request to web socket in json format.

{"currencyPair":"' + props.country + '"}

• Attach a chart component from the Chart.js library that will be used to render our web socket data.
• When new data arrives from the onmessage event handler, update the data in the state bound to the chart. Remember you don’t want to display very old data so remove old data that you don’t want to display.
• Close the web socket connection when the component is destroyed.
• When rendering your component, you need to show different colors based on the current value.
• Implement the HTML markup to accompany your implementation.

And finally the accompanying styles, currency.component.css

currency.component.css

Finally update your module file:

app.module.ts

• Import HttpClientModule
• Import FormsModule

Run the application

Run the application and you should see the following:

Resources

1. Angular Guide: https://angular.io/guide/setup-local
2. NodeJs: https://nodejs.org/