Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Profile photo of Bob at Genuitec
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.

With Bitcoin’s record-breaking surge past the $7000 mark, we thought this would the perfect time to build a cryptocurrency dashboard with Angular. Cryptocurrency is a digital asset designed to work as a medium of exchange, using cryptography to secure the transactions and to control the creation of additional units of the currency. While Bitcoin is the most popular digital currency, there are numerous other cryptocurrencies in existence.

In this tutorial, we will be creating a cryptocurrency dashboard using Angular and Angular IDE. On our dashboard, we will display the price, percentage change in 24-hour price, and percentage change in 7 day price of selected cryptocurrencies. You will learn about Angular fundamentals, like services and components – we’ll be creating several of these.You will also learn how to use RxJS Subjects.

Create New Angular Project

We’re going to be using Angular IDE through this tutorial, though you can use Webclipse or MyEclipse too, following exactly the same steps. Before beginning, do ensure you are in the Angular Perspective (Window > Perspective > Open Perspective > Other > Angular) for an optimum workspace layout and development experience.

In the new Angular project wizard (File > New > Angular Project), type crypto-dashboard as the project name – you may change the Node.js, npm and Angular CLI versions if desired.

cryptocurrency-dashboard-ss-3

Angular IDE will take a few minutes to set up the project, you can see the activities output in Terminal+. Once completed we see an output like in the image below:

terminal-original

Ready to see what your app looks like in a browser? With Angular IDE, it’s easy to run, or even debug an Angular application with just a few clicks. Use the Servers view, or the Run / Debug As actions to get started. Read this doc for more information.

Create Application Components

Taking a look at our UI design, we can identify two visible components, the search-filter box, and the list card. There is also an invisible component – the list itself. The components are highlighted in the picture below:

cryptocurrency-dashboard-ss-5

Now, let’s create the components. In the Component wizard (File > New > Component), type in search-filter as the Element name and click Finish.

Repeat the same steps to create the list-card, list and dashboard components too.

Tip: Notice how the commands to create the components are executed in the Terminal+ view, with the Angular CLI? Instead of using the Wizard, you could execute ng g component dashboard in the Terminal+ view (when in the app folder) to achieve the same result – our tooling is bidirectionally compatible with the Angular CLI!

Your directory structure, under the src/app folder should be as in the image below:

cryptocurrency-dashboard-ss-8

Add Bootstrap CSS and Font Awesome

Let us add Bootstrap CSS and Font Awesome to our project by updating the contents of src/index.html, add the code snippet below to the head section of the file:

Install Angular-2-dropdown-multiselect

AngularX Dropdown Multiselect is used to create customizable dropdown combo in which multiple elements can be selected. Let’s install it by executing the command below in Terminal+:

npm install --save angular-2-dropdown-multiselect

In order to make the multiselect component available in our application, we need to import MultiselectDropdownModule in the AppModule. The entire source of  src/app/app.module.ts with this change is below:

Here’s how the multi-select widget will appear in our final result.

cryptocurrency-dashboard-ss-10

The API

We will be using the API provided by coinmarketcap.com. To store the data returned, let us create a TypeScript class file named coin.ts in the app folder, with the following content. Note that you can use the Class wizard (File > New > Class) to create an empty class, and then replace the source with the snippet below:

Create the AppService

In this tutorial, we will be using just one Angular Service, named AppService. In Angular, a Service is a broad capability encompassing any value, function, or feature that your application needs. In the Service wizard (File > New > Service), enter app as the Element name and click Finish.

AppService

AppService is a general-purpose class we will use to fetch data from the API, and pass that data on to components. We also use AppService to filter the data to display based on the options selected in the app. We could split this service into multiple services to abide by the single responsibility principle – but for simplicity, we won’t do that here.

Before we dive into the code, let’s get a few fundamentals down. First, RxJS is a reactive programming framework for Javascript. Core to understanding how to use RxJS is having a mental model of the observer pattern. The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependants, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.

Now RxJS Subjects are just like Observables, but they can multicast events to many Observers. In our service, we define four subjects.
  • coinsSubject: notifies its observers of coin data fetched from the API.
  • filteredCoinsSubject: its observers the filtered collection of crypto currency data. So,in the multiselect filter, only two crypto coins are selected then, the most recent value emitted by subscribing to filteredCoinsSubject will be an array of length two.
  • apiSubject: notifies its observers with a string message based on API actions.
  • fiatSubject: notifies its observers about the value of the selected fiat currency when it is updated.

The full code for AppService (src/app/app.service.ts) is below; explanations are in the comments.

App Component

Update the content of src/app/app.component.html with the content below. We display the title in an h2 element, and we set the dashboard component as a child view.

Dashboard Component

The dashboard component will serve as a parent component for two components, the search component and the list component. Replace the contents of src/app/dashboard/dashboard.component.html with the code snippet below:

<app-search-filter></app-search-filter>
<app-list></app-list>

Since the scope of the service instance is the parent component and its children, we will create an instance of AppService in the dashboard component that will be shared by the search-filter component and the list component. To do this we update src/app/dashboard/dashboard.component.ts by importing AppService, and adding AppService to the providers array – which enables Angular’s Dependency Injector for AppService.

SearchFilter Component

The search-filter component is made up of a form containing two elements.

The first is a select element for choosing a fiat currency used in displaying the current worth of each crypto currency. The selected currency will be stored in a model aptly named SelectedCurrency. An onChange event listener will notify the app service to load data from the API.

The second element is is a multiselect dropdown that will enable us filter our choice of cryptocurrencies to display.

The code below goes in src/app/search-filter/search-filter.component.html:

List Component

This component manages the display of a list of cards. One for each crypto coin data returned from the API. The coins model is an array of the data to be rendered by each coin.

Let us update the contents of src/app/search-filter/search-filter.component.ts:

Let us update the contents of src/app/list/list.component.html:

The content of src/app/list/list.component.css is

In src/app/list/list.component.ts, we subscribe to three RxJS subjects in our Service –  filteredCoinsSubject, apiSubject and fiatSubject.

ListCard Component

The list-card component will display the market cap summary of a single cryptocurrency.

Let’s update the content of src/app/list-card/list-card.component.ts with this code:

And the content of src/app/list-card/list-card.component.html with:

Running the Application

Okay, let’s run the application! Open Angular IDE’s server view (Window > Show View > Servers), right click on your project, and select Start Server. Angular IDE serves the application on localhost, port 4200 by default, so open http://localhost:4200 in your browser to see the running app. Alternatively, use the “Run/Debug application in Chrome”, context menu actions on the project to load your app in the browser automatically.

cryptocurrency-dashboard-ss-11

Angular Cryptocurrency Dashboard

Conclusion

We hope this article helped you understand how to interact with web services, and build a moderately complex UI in Angular, with Angular IDE. At $7000, it may be a tad late to buy some Bitcoin today, but Angular IDE can be had at a much lower price. Buy Angular IDE today – it’s an investment that’s sure to pay huge dividends in the short and long term. Remember, you can benefit from our Angular features in our standalone Angular IDE, as part of our Webclipse plug-in, or our fullstack offering, MyEclipse IDE.

Related Posts

Angular 5 Features Front-end developers, rejoice - after a short delay, the Angular 5 release is scheduled for October 23rd!Update (November 1st): It's finally here! After ten release candidates, Angular version 5.0.0, "pentagonal-donut", has been released.Update (October 31st): Well, we're still waiting for Angular version 5, and we're now at 5.0.0 RC 9 - but, I'm s...
Testing Angular Apps with Jasmine and Karma Testing is one of the most important aspects of the modern application development process. Today, high quality, robust applications are the norm; nobody appreciates a buggy application. This article will walk you through testing your Angular application using capabilities that are already part of your Angular project.Creating a New Angular Project...
Using Swagger to Connect a Backend to an Angular F... IntroductionLet’s say you have an advanced backend system, for which you wish to develop a modern Angular frontend, or, perhaps it’s not your backend, but something public like Facebook, and you want to develop a site using some of its exposed APIs. Of course, you want to do this with minimal effort ... how do you pull this off? Enter Swagger!This ...
TypeScript 2.5 Features If you have kept true to JavaScript (JS), using TypeScript (TS) doesn’t represent abandoning a good old friend. It’s simply moving on to its typed superset - basically, getting JS with optional static types, which gets you the best of both worlds (the JS flexibility and strengthened TS security).  If you have already enjoyed TypeScript’s capabiliti...

Posted on Nov 7th 2017