{"id":819,"date":"2018-08-07T14:46:00","date_gmt":"2018-08-07T14:46:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=819"},"modified":"2025-02-26T08:25:54","modified_gmt":"2025-02-26T08:25:54","slug":"crypto-portfolio-app","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/crypto-portfolio-app","title":{"rendered":"How to Build a Crypto Portfolio App with Ignite UI for Angular"},"content":{"rendered":"\n

I wanted to share with you how easy it is to create Angular application with our Ignite UI for Angular<\/a> <\/span>toolset. <\/span><\/p>\n\n\n\n

What is the purpose of this application? <\/span>First <\/b>of all, to demonstrate our Angular components. <\/span>Second<\/b>, it\u2019s to demonstrate a real use case, and I wanted to create a system that will track my cryptocurrencies portfolio in order to check my daily gains and losses.  <\/span>As for the third reason<\/b>,  to demonstrate the use of different \u0410ngular techniques like utilizing Guards, Pipes, and Custom Templates with our components and, of course, using of <\/span>Firebase <\/b>for data storing and authentication.<\/span><\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

The topic will cover:<\/span><\/p>\n\n\n\n

    \n
  1. The use of <\/span>Ignite UI Angular CLI<\/span><\/a><\/li>\n\n\n\n
  2. Data services, Routing, Templating, Pipes, etc.<\/span><\/li>\n\n\n\n
  3. The use of Firebase Data Storage, Authentication, and CRUD operations<\/span><\/li>\n\n\n\n
  4. Coinmarketcap API to Retrieve real-time and historical price information<\/span><\/li>\n<\/ol>\n\n\n\n

     <\/p>\n\n\n\n

    Ignite UI CLI<\/h2>\n\n\n\n

    Okay, let’s start! So, have you heard about <\/span>Ignite UI CLI<\/span><\/a>? Yep, this is a real thing that we\u2019ve developed that helps you create Angular applications with a predefined set of components, executing just a few commands. It takes less than three minutes to install all necessary packages and to run the project with the help of our CLI, just follow our official <\/span>Getting started page<\/span><\/a>.<\/span><\/p>\n\n\n\n

    After the building of the app is completed along with the installation of all necessary packages, you will notice that <\/span>Navigation drawer<\/span><\/a> and <\/span>Grid <\/span><\/a>components were added and already configured. The same applies for the different responsive views, routing, styles, module imports, etc. – awesome, right?<\/span><\/p>\n\n\n\n

    export const routes: Routes = [\n  { path: '', redirectTo: '\/home', pathMatch: 'full' },\n  { path: 'home', component: HomeComponent },\n  ...\n];<\/pre>\n\n\n\n
    Okay, what’s next? We want our app to show variety of things: we want to have user authentication, to track crypto data changes, and to store our Cryptocurrencies portfolio somewhere. For that purpose, Ignite UI for Angular provides all suitable components out of the box. We are going to use <\/span>Chart <\/span><\/a>for historical data changes and a <\/span>Grid <\/span><\/a>to show our crypto portfolio and provide the ability to add\/update\/delete cryptocurrencies, also <\/span>List <\/span><\/a>and <\/span>Card<\/span><\/a>.<\/span><\/p>\n\n\n\n
    For all of the above requirements we need to get the data from somewhere, this is where the <\/span>min-api.cryptocompare<\/span><\/a> steps in – This is a free service that provides information for all active cryptocurrencies in one call.<\/span><\/p>\n\n\n\n
    export class BlockGridComponent implements OnInit, AfterViewInit{\n  public remoteData: CoinItem[];\n  ...\n\n  ngAfterViewInit() {\n    this.dataService.getData().subscribe(res => {\n      this.remoteData = res;\n    });\n  ...\n}<\/pre>\n\n\n\n
    App Authentication\u00a0<\/b><\/span><\/p>\n\n\n\n
    Below I\u2019ve highlighted some steps that I\u2019ve took in order to set up the Firebase authentication of the Crypto App. <\/span>AngularFireAuth <\/b>is going to be used for user authentication and all related actions like login and logout. This firebase service provides methods for sign in with email and password, Google authentication provider, and Facebook auth provider. For a more detailed explanation, I recommend checking up the official <\/span>Angular firebase repository and documentation<\/span>.<\/span><\/a><\/p>\n\n\n\n
     <\/p>\n\n\n\n
      \n
    1. Set up a <\/span>firebase<\/a> <\/span>project. <\/span><\/span><\/li>\n\n\n\n
    2. Go to the Authentication tab and enable Google, Facebook, and Email\/password sign-in providers.<\/span><\/li>\n\n\n\n
    3. Based on the methods, generate Facebook ID and later on OAuth redirect URI.<\/span><\/li>\n\n\n\n
    4. Add rules and publish the changes.<\/span><\/li>\n\n\n\n
    5. Add the firebaseConfig to the Angular project.<\/span><\/li>\n\n\n\n
    6. Create Login, Signup and Email components. (code for all)<\/span><\/li>\n\n\n\n
    7. Create auth.service that will handle the redirects of registered and unregistered users (<\/a><\/span>Route guards<\/span><\/a>)<\/a>. As you can see from the code, (add code), the Portfolio page is accessible only for authorized users.<\/span><\/span><\/li>\n<\/ol>\n\n\n\n
      @Injectable()\nexport class AuthGuard implements CanActivate {\n\n    constructor(private auth: AngularFireAuth, private router: Router, private route: ActivatedRoute) {}\n\n    canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot): Observable<boolean> {\n      return Observable.from(this.auth.authState)\n        .take(1)\n        .map(state => !!state)\n        .do(authenticated => {\n          if (!authenticated) {\n            this.router.navigate([ '\/login' ], {\n              queryParams: {\n                return: routerState.url\n              }\n            });\n          }\n      });\n    }\n\n}<\/pre>\n\n\n\n
      For more details, have a look at the official firebase authentication getting started <\/span>topic<\/span><\/a>, and I can guarantee that you won’t feel any kind of difficulties when setting it up.<\/span><\/p>\n\n\n\n
      \"<\/figure>\n\n\n\n
      Data Storage and CRUD Operations<\/h2>\n\n\n\n
      For data storing and data updates, our application is using <\/span>Firebase Realtime Database<\/span><\/a> which is a cloud-hosted database, stored as JSON and synchronized in realtime to every connected user. All users share on Realtime Database instance and automatically receive updates with the newest data. <\/span><\/p>\n\n\n\n
      Reading and writing of data is easy, and below are the steps that you could follow in order to achieve CRUD operations:<\/span><\/p>\n\n\n\n