Build a simple Cryptocurrency App using Angular 8

Build a simple Cryptocurrency App using Angular 8

Cryptocurrencies have garnered a lot of attention recently. That’s why in this article we’ll build a simple application to display them using Angular Framework which is a TypeScript framework whose library offers tons of features to implement complex requirements of modern applications.

Cryptocurrencies have garnered a lot of attention recently. That’s why in this article we’ll build a simple application to display them using Angular Framework which is a TypeScript framework whose library offers tons of features to implement complex requirements of modern applications.

Sometimes when building applications, we need to add standalone bits of code called components available in UI Component Libraries. In this article we will use a Angular library called PrimeNG. PrimeNG has a rich collection of components for the most of the UI of your application.

Prerequisites
  • For this tutorial, you can download and install Angular IDE.
  • However, if you already have an Eclipse installation you are happy with, add Angular IDE to it from the Eclipse marketplace.
  • If you already have CodeMix installed, simply ensure you have the Angular extension Pack installed from the Extension Manager at Help > CodeMix Extensions.

Optimize your Angular development with Angular IDE powered by CodeMix. If you’re new to Angular, use our new eLearning infrastructure to easily build an Angular front end, using Angular features along the way to make the job easier. The eLearning infrastructure provides you interesting examples on how to get started on the technologies supported on CodeMix.

Creating a New Angular Project

Open Angular IDE, click File in the top menu, then select,New then click Angular Project

Angular IDE will take a few minutes to set up the project, you can see the activities output in Terminal+. As shown below

Once the project is created, we can now install PrimeNG and Angular CDK libraries to our project. In the opened terminal+ type the following commands.

npm install primeng --save
npm install @angular/cdk --save

Now, configure required styles at the styles section angular.json

"styles": [
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  "src/styles.css"
]

Run Application

Run the application from the server tab of Angular IDE. Run the application from the server tab of Angular IDE. With Live Preview 2.0, you get an immediate preview of the application right in the IDE.

Now, you get the immediate preview of the Angular application in Angular IDE

Choosing an API

The CoinMarketCap API provides you the world’s Cryptocurrency data. To get a top 10 cryptocurrency list and their data, CoinMarketCap API provides us an ordered list on https://api.coinmarketcap.com/v1/ticker/?limit=10, we can open this URL in a browser to see the list of the data that is going to be returned.

To store the data returned, let us create a TypeScript class file named coin.ts in the app folder, with the following content.

export class Coin {
    id: string;
    name: string;
    symbol: string;
    rank: string;
    priceUsd: string;
 
    constructor(attrs: any = null) {
        if (attrs) {
            this.build(attrs);
        }
    }
 
    build(attrs: any) {
        this.id = attrs.id;
        this.name = attrs.name;
        this.symbol = attrs.symbol;
        this.rank = attrs.rank;
        this.priceUsd = attrs.price_usd;
    }
}

Building the App

We’ll use DataView component. DataView displays data in a grid or list layout with pagination, sorting and filtering features. Let’s create a new service called crypto In the project explorer view, right-click on app, select new, and click Service and as shown below:

Services are one of the fundamental blocks of every Angular application. They are used when dealing with APIs.

Replace the code of crypto.service.ts as below:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
 
 
@Injectable({
  providedIn: 'root'
})
export class CryptoService {
 
  constructor(private http: HttpClient) { }
 
  list(): Observable<any> {
    return this.http
      .get('https://api.coinmarketcap.com/v1/ticker/?limit=10')
      .pipe(map(data => data));
  }
}</any>

We just defined a simple service and a method called list which return the top 10 coins from CoinMarketCap API.

Now, open your app.module.ts file and Import DataView component:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DataViewModule } from 'primeng/dataview';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DataViewModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the code snippet above, we also imported HttpClientModule for crypto service created earlier.

Now, update the code of app.component.ts file with the code provided below:

import { Component } from '@angular/core';
import { CryptoService } from './crypto.service';
import { Coin } from './coin';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  coins: Coin[];
 
  constructor(private service: CryptoService) {
    this.loadCoins();
  }
 
  loadCoins() {
    this.service.list().subscribe(
      coins => {
        this.coins = coins.map(c => new Coin(c));
      }
    );
  }
}

The code above fires crypto service injected by dependency.

Now, we can use DataView component which requires a collection of items as its value and one or more templates depending on the layout mode:

<p-dataview [value]="coins">
    <p-header>
        <p-dataviewlayoutoptions></p-dataviewlayoutoptions>
    </p-header>
    <p-footer>
        <p-dataviewlayoutoptions></p-dataviewlayoutoptions>
    </p-footer>
 
    <ng-template let-coin="" ptemplate="listItem">
        <div>
            {{coin.name}}
        </div>
    </ng-template>
    <ng-template let-coin="" ptemplate="gridItem">
        <div class="ui-g-12 ui-md-3">
            {{coin.name}}
        </div>
    </ng-template>
</p-dataview>

New Live Preview browser pane in Angular IDE

You can now customize your template as you want, layout options selector, sorting and filtering are baked-in and no strict UI is enforced to make it possible to come up with your own UI elements to enable these features.

Conclusion

In this article, we have learned how to use an external Component Library on Angular 8 customizing our UI in a way that adapts better to our needs. Also, we have learned how to work with the data obtained from an API, all of this using Angular IDE.

You can download the source code from our GitHub repository here.

Create a cryptocurrency dashboard with Angular

Create a cryptocurrency dashboard with Angular

In this tutorial , we will be creating a cryptocurrency dashboard using Angular 4 and Angular IDE.&nbsp;Cryptocurrency&nbsp;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. Bitcoin is the most popular digital currency, however there are numerous cryptocurrencies in existence.

In this tutorial , we will be creating a cryptocurrency dashboard using Angular 4 and Angular IDE. 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. Bitcoin is the most popular digital currency, however there are numerous cryptocurrencies in existence.

On our dashboard, we will display the price, percentage change in 24 hour price, and percentage change in 7 day price of selected cryptocurrencies.

What You will Learn

In this article you will learn about Angular application development using Angular IDE. You will also learn how to use the Subject class from RxJS, a ReactiveX library for javascript.

Prerequisites

In order to follow along with this tutorial, please ensure you have installed Angular IDE.

UI Design

Below is a picture of how the cryptocurrency dashboard will look like on mobile.

Step 1 — Create new Angular project

Open Angular IDE, click File in the top menu, then select, New then click.Angular Project

In the new Angular project wizard, type crypto-dashboard as the project name, select node version 6.11.4, and npm version 3.10.10. Then click the finish button.

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

Step 2 — 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 which is the list itself. The components are highlighted in the picture below:

Now, let’s create the components. In the file explorer view, right click on crypto-dashboard, select new, and click.Component

In the New Angular CLI dialog, enter search-filter as element name, and click the finish button. See image below for reference:

Repeat the steps to create the list-card, and list component. Also create a dashboard component, so we use it to organize our components. Your directory structure, under the src/app folder should be as in the image below:

Create AppService

In this tutorial, we will be using just one Angular Service, named AppService. In Angular, a Service is a broad category encompassing any value, function, or feature that your application needs.

In the file explorer view, right click on crypto-dashboard, select new, and click Service. In the new Angular CLI Service wizard, enter App a the element name, and click finish.

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 in the head section of the html document

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700'
rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" />

Install angular-2-dropdown-multiselect

AngularX Dropdown Multiselect for Bootstrap CSS is used to create customizable dropdown multiselect in AngularX, TypeScript with bootstrap css. We will be needing multiselect in this project, so let’s install it by typing the command below in Terminal+ and hitting enter

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

In order to make the multiselect component available in our application, we need to update src/app/app.module.ts as follows:

...
import {MultiselectDropdownModule} from 'angular-2-dropdown-multiselect';

@NgModule({
...
imports: [
...
MultiselectDropdownModule,
],

Here is a screenshot of how the multi-select plugin will appear in our final result.

The API

We will be using the api provided by coinmarketcap.com. Using the sample data returned, let us create a type script shape file named coin.ts with the following content

export class Coin {
id: string;
name: string;
symbol: string;
rank: string;
price_usd: string;
price_btc: string;
'24h_volume_usd': string;
market_cap_usd: string;
available_supply: string;
total_supply: string;
percent_change_1h: string;
percent_change_24h: string;
percent_change_7d: string;
last_updated: string;
}

App Service

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 so as to abide by the single responsibility principle.

The Subject class from RxJs is very important in this code section and it’s important to touch on what they are. Firstly let us talk about RxJs, it 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 dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.

First we import {Injectable} from @angular/core, {Subject} from rxjs/Subject, {HttpClient, HttpParams} from @angular/common/http . Next we import the coin shape Coin from ./coin, and we create a constant APIBASEURL to hold the base url of the api.

Now we export class AppService, making sure we decorate it using @Injectable(), then we define three private variables allCoins: Coin[], filteredCoins: Coin[], and filter: number[]. We also define four subjects

  • coinsSubject: Which notifies it’s observers of coin data fetched from the API
  • filteredCoinsSubject: Which notifies it’s observers the filtered collection of crypto currency data. So if 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 it’s observers with a string message based on api actions
  • fiatSubject :notifies it’s observers about the value of the selected fiat currency when it is updated.

The full code for AppService is below, explanations are in the comments

// Imports
import {Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
import {HttpClient, HttpParams} from '@angular/common/http';
// Import Coin Shape file
import {Coin} from './coin';
const API_BASE_URL = 'https://api.coinmarketcap.com/v1/';

@Injectable()
export class AppService {
private allCoins: Coin[]; // will hold unmodified data returned by the api
private filteredCoins: Coin[]; // will hold data filtered from this.allCoins
private filter: number[]; // will hold the array index of data contained in this.
allCoins that should not be filtered out

// A couple of RxJs Subjects very important for communicating across Angular Components
coinsSubject: Subject<Coin[]>;
filteredCoinsSubject: Subject<Coin[]>;
apiSubject: Subject;
fiatSubject: Subject;
constructor(private http: HttpClient) {
this.filter = [];
// we initialize our subjects
this.coinsSubject = new Subject();
this.filteredCoinsSubject = new Subject();
this.apiSubject = new Subject();
this.fiatSubject = new Subject();
}
// this method loads market cap data from the API
loadMarketCaps(fiat: string) {
this.fiatSubject.next(fiat);
const url = API_BASE_URL + 'ticker/';
let params = new HttpParams();
params = params.append('limit', '25');
if (fiat !== 'usd') {
// TODO: check if fiat is valid
params = params.append('convert', fiat);
}
this.apiSubject.next('loading...');
this.http
.get<Coin[]>(url, {params})
.subscribe(
data => {
this.allCoins = data; // store returned data
this.announceCoins(); // trigger announcements
this.filterMarketCaps();
}
);
}

filterMarketCaps() {
this.filteredCoins = [];
if (this.filter.length === 0) {
this.allCoins.forEach((coin) => this.filteredCoins.push(coin));
}
if (this.filter.length > 0) {
this.filter.forEach((i) => {
this.filteredCoins.push(this.allCoins[i]);
});
}
this.announceFilteredCoins();
}
announceCoins() {
this.coinsSubject.next(this.allCoins);
}
announceFilteredCoins() {
this.filteredCoinsSubject.next(this.filteredCoins);
}
updateFilter(filter: number[]) {
this.filter = [];
filter.forEach((elem) => {
this.filter.push(elem);
});
this.filterMarketCaps();
}
}

App Component

Update the content of src/app/app.component.html with the content below. We display the title in a h2 element, and we set the dashboard component as a child view. If our project needed a router, we would have set it up here in App component.

<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h2 class="text-center">{{ title }}</h2>
<app-dashboard></app-dashboard>
</div>
</div>
</div>

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 which 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 AppSercieto the providers array which enables Angular’s Dependency Injector for AppService.

import {Component} from '@angular/core';
// import AppService
import {AppService} from '../app.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
providers: [AppService] // provider setup
})
export class DashboardComponent {}

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 crypto currencies to display.

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

<div>
<form>
<div class="form-group">
<select id="selectedCurrency" name="selectedCurrency" [(ngModel)]="selectedCurrency"
(change)="selectCurrency($event.target.value)" class="form-control"
id="fiat">
<option value="">Select fiat currency</option>
<option *ngFor="let currency of currencies" value="{{currency}}">{{currency.toUpperCase()}}</option>
</select>
</div>
<div class="form-group">
<ss-multiselect-dropdown id="cryptocurrencies"
name="cryptocurrencies" [texts]="myTexts" [settings]="mySettings"
[options]="cryptoCurrOptions" [(ngModel)]="optionsModel"
(ngModelChange)="filterChange($event)"></ss-multiselect-dropdown>
</div>
</form>
</div>

and the code below goes in src/app/search-filter/search-filter.component.ts

// Imports
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {AppService} from '../app.service';
import {IMultiSelectOption, IMultiSelectSettings, IMultiSelectTexts} from 'angular-2-dropdown-multiselect';
@Component({
selector: 'app-search-filter',
templateUrl: './search-filter.component.html',
styleUrls: ['./search-filter.component.css'],
providers: []
})
export class SearchFilterComponent implements OnInit {
currencies: string[];
cryptoCurrOptions: IMultiSelectOption[];
selectedCurrency: string;
optionsModel: number[];
// Settings configuration for the multiselect plugin
mySettings: IMultiSelectSettings = {
enableSearch: true,
checkedStyle: 'fontawesome',
buttonClasses: 'btn btn-default btn-block',
dynamicTitleMaxItems: 5,
displayAllSelectedText: true
};
// Text configuration for the multiselect plugin
myTexts: IMultiSelectTexts = {
checkAll: 'Select all',
uncheckAll: 'Unselect all',
checked: 'item selected',
checkedPlural: 'items selected',
searchPlaceholder: 'Find',
searchEmptyResult: 'Nothing found...',
searchNoRenderText: 'Type in search box to see results...',
defaultTitle: 'Filter cryptos',
allSelected: 'All selected',
};
constructor(private appService: AppService) {
this.currencies = ['usd', 'eur']; // fiat currency options
this.selectedCurrency = ''; // model to store selected fiat
// array to hold names of cryptos to be used in filtering
this.cryptoCurrOptions = [];
// coinsSubject is a RxJs subject in our service that will notify us when the api has gotten data about crypto coins
this.appService.coinsSubject.subscribe({
next: (v) => this.updateCryptoOptions(v),
});
}
ngOnInit() {
}
selectCurrency(newValue) {
this.appService.loadMarketCaps(newValue);
}
filterChange(newValue) {
// BUG method should not be triggered by filter select
this.appService.updateFilter(newValue);
}
// This method creates an array of valid options for the multiselect plugin from an array of crypto coins
updateCryptoOptions(coins) {
this.cryptoCurrOptions = [];
coins.forEach((coin, index) => {
this.cryptoCurrOptions.push({
id: index,
name: coin.id.charAt(0).toUpperCase() + coin.id.slice(1)
});
});
}
}

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 rendered by each coin. Let us update the contents of src/app/list/list.component.html

<div class="list-cards pb-4">
<app-list-card *ngFor="let coin of coins" [coin]="coin" [fiat]="fiat"></app-list-card>
</div>
<div *ngIf="!coins">
{{noDataMsg || 'Nothing to display'}}
</div>

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

.list-cards {
display: flex;
flex-direction: column;
align-items: center;
}

In src/app/list/list.component.ts , we subscribe to three RxJs subjects in our Service.

  • filteredCoinsSubject: Which sends updates on the filtered collection of crypto currency data. So if 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 : emits a string message based on api actions
  • fiatSubject : emits the value of the selected fiat currency when it is updated.
import {Component, Input, OnInit} from '@angular/core';
import {AppService} from '../app.service';
import {Coin} from '../coin';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
coins: Coin[];
noDataMsg: string;
fiat: string;
constructor(private appService: AppService) {
this.noDataMsg = 'Select fiat currency to get started';
this.appService.filteredCoinsSubject.subscribe({
next: (v) => this.updateCoins(v),
});
this.appService.apiSubject.subscribe({
next: (msg) => this.noDataMsg = msg,
});
this.appService.fiatSubject.subscribe({
next: (newValue) => this.fiat = newValue,
});
}
updateCoins(coins: Coin[]) {
this.coins = [];
coins.forEach((coin) => this.coins.push(coin));
}
ngOnInit() {
}
}

ListCard Component

The list-card component, is basically to display the market cap summary of a single cryptocurrency. The content of src/app/list-card/list-card.component.html is below

<div class="card text-center mt-4">
<div class="card-body">
<h2 class="card-title">{{ coin.id }}</h2>
<h4 class="mb-0 pb-1">{{fiat.toUpperCase()}} {{ coin['price_'+fiat] }}</h4>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">24 hours: <span [class]="coin.percent_change_24h.charAt(0)==='-' ? 'red' : 'green' ">{{ coin.percent_change_24h
}}</span></li>
<li class="list-group-item">7 days: <span [class]="coin.percent_change_24h.charAt(0)==='-' ? 'red' : 'green' ">{{ coin.percent_change_7d }}</span></li>
</ul>
</div>

and src/app/list-card/list-card.component.ts

import {Component, OnInit, Input} from '@angular/core';
@Component({
selector: 'app-list-card',
templateUrl: './list-card.component.html',
styleUrls: ['./list-card.component.css']
})
export class ListCardComponent {
@Input() coin;
@Input() fiat;
}

Run application

Run the application from the server tab of Angular IDE.

Conclusion

I hope you learnt a few things about Angular and Angular IDE. Thanks!


Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

Learning Angular can be a daunting experience that's why this course was created; to give you an easier learning experience with it.

What am I going to get from this course?

  • You will learn the mayor fundamentals of Angular
  • You will learn how to get up and running with Angular
  • You will learn to create Applications using Angular 5 and beyond

What you'll learn

  • You will learn the mayor fundamentals of Angular
  • You will learn how to get up and running with Angular
  • You will learn to create Applications using Angular 5 and beyond