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.

angular blockchain cryptocurrency

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

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.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Revolutionary Application of Blockchain Technology

Our Blockchain Online Training will provide you to learn about Blockchain technology aspects with realty. Our Blockchain Course also includes live sessions, live Projects

Blockchain along with Data Science: A powerful combination

Blockchain has became the new buzzword in recent times. Though it was earlier known for the usage of bitcoin and other cryptocurrencies, now this technology has attracted the interests of several governments in the world to be integrated with...

Blockchain, The Next Level Transaction Medium for Banking and Financial Services

Our Blockchain Online Training will provide you to learn about Blockchain technology aspects with realty. Our Blockchain Course also includes live sessions, live Projects