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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

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

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

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.

The Future Of Blockchain Technology And Cryptocurrency Applications

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

5 Blockchain Applications That Have Transformed the World of Technology

The blockchain is the decentralized database of the blocks of information, which gets recorded in the chain format and linked in a secured crypto graphical manner. This technology ensures proper safety of the data due to its secure nature, and it totally changes how people carry out transactions. It also brings about a faster and secure process of validating information needed to establish reliability.

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