Building a Trading App in Angular: Blotter

6 min readMay 22, 2020

This is the first 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.

What do Front End Developers do? Our responsibilities are usually to build a User Interface for some Back End service. We are given the requirements and work closely with other developers to build a User Interface to represent the various services being offered.

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

Think about your requirements in terms of Angular components
Implement HTTP requests to fetch data from given services
Display data in User Interface using tables
Add CSS to change the look and feel of the application

Blotter

Blotter is a progressive front end application we are going to build using Angular. The fundamental requirements of this application are simple: you’re given an API for a Back End service with extra details about how the user interface should look.

In this article, we are going to start building our Blotter app with Angular. There are many steps to building this complete application. We will build on this idea in upcoming articles.

Requirements For Blotter

Imagine you’re working for a trading company, and they have been working on this new product called Blotter that will allow their customers to view their trading history. They have already implemented the services but you have to build a nice User Interface for the application, with the following requirements:

Display a record of all the trades in a table
Each record of the trade will include details such as time, price, order size, and a specification of whether it was a buy or sell order.
You are given a REST API from which to retrieve the data.
The application should display a table of using the data fetched from the REST API.
Users should be able to filter trades using a search input. Add one search box in the CcyPair column and the Status column. When the user starts typing inside the search box, only the matching rows should be displayed.
Add a Sort button in the Time column. On clicking the button, the table should be sorted in ascending and on clicking it again, it should be sorted in descending.

Prerequisite

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

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.
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.

Components design is a design pattern whereby the application is reasoned about as a set of components interacting with each other to accomplish the application requirements.

With this in mind, we can even consider the whole application as a component, which we call Application.
The Application contains a root component which will contain other components in the application. This is typical of many component design architectures, it is a good design principle to always decouple your application component from the implementation component. The component we are calling Application is an abstract component, but the root component will be a real component in our application to contain other components.
The Root Component contains the components needed to display our trading data.

Components Design

Now that we have a high level architecture of our application, it is good to make some initial decisions about how the components are going to communicate.

Let our Application component tell the Root Component when it is finished with its creation process. The root component has no way of knowing this on its own.
Once the root component gets this notification, it fetches the data from the rest endpoint.
The root component will provide the data to the various components that depend on it.

A closer look at the diagram reveals numbers of the form (0..*, 0..1, 1). These are called multiplicity specifies. They tell us how many of that component is allowed in the application. For example there will be no headers when there is no data, and only one header component when data is available, so it has a multiplicity of 0..1. The same idea can be applied to the others.

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 components, let us create the various typescript types that we are going to need.

Create a folder called models inside your src folder.

Create a file: Search.ts

App Component: Already created for you from the starter project as App.js

app.component.ts

2. Header Component:

Using the angular cli, generate the header component:

$ ng g component header

Update the header.component.ts to the following:

Emit a search event when search component is searched.
Emit a sort event when the TIME column header is clicked

header.component.html

Implement the various table head components shown below:

3. Record Component:

Using the angular cli, generate the header component:

$ ng g component record

Update the record.component.ts to the following:

record.component.html

4. Search Component:

Using the angular cli, generate the header component:

$ ng g component search

Update the search.component.ts to the following:

search.component.html

Making HTTP Requests

Let us create a simple service to handle HTTP requests, called app service.

$ ng g service app

app.service.ts

Create a method getRecords in the service that will make HTTP request using the angular HttpClient service.

Now update your app component to implement the required features

When component is initialized, get the records through our service.
Implement method to handle searching the records and updating the list of displayed records. We need to be able to search using CCYPAIR and STATUS.
In addition to this, we should be able to sort the records using the TIME column. Let’s go ahead and implement these features. Implement a sorting functionality. One to sort by ascending and the other to sort by descending.

app.component.html

Now add the following styles to your styles.scss.