Cryptocurrency Price tracker in Angular
In this project we are going to create a cool crypto currency app in Angular.
This project have been inspired by this awesome youtube video.
So, go ahead and create new angular app with below command. Also, add routing and CSS in it.
Next, we will go to the folder and add material ui in it, by using ng add. We will be asked to choose a theme and we are choosing Custom.
Next, we have to choose typography styles and angular material as yes.
Now, we are going to use https://material.angular.io/ in our project. We are going to use Material toolbar in our project.
Now, go to app.module.ts file and add the required modules with import in it.
Next, in the app.component.ts file add a variable of selectedCurrency and also a function of sendCurrency().
Now, we will also add style for our App component in app.component.css file.
Finally, we will add the code in app.component.html file. Here, we are using all Angular material component.
Also, in the select sending the event to sendCurrency function. We are also using two way data binding in selectedCurrency.
Now, run ng serve and in localhost we will see this beautiful navbar. On selecting the USD from dropdown we are getting it in the console.
Now, we will create two new components with the ng g c command from the terminal.
Now, we need to also add routes for these new components in app-routing.module.ts file.
Now, if we go to http://localhost:4200/crypto-list the routing is working properly.
We will also be adding bootstrap in our project. So, we will add bootstrap version 5 link in index.html file.
Next, in the crypto-list.component.html file, we will add the basic doe to show an header and also a marquee tag,
We will also add the style for the same in the crypto-list.component.css file.
Now in our website, we will see a nice section with a image.
Now, we will create a service component by giving the command ng g s service/api from the integrated terminal.
Now, in the api.service.ts file, we will use the HttpClient. Here, we are using diffrent coingecko APIs to get different data.
We will also add the HttpClientModule in the app.module.ts file.
Now, in the crypto-list.component.ts file, we are getting the banner data and all data using the Api services.
Now, when we will open the console in the home page, we will see the data coming from API endpoint.
Now, we will update our crypto-list.component.html file to show the banner data, inside the marquee tag.
Now, we will add style for the same in crypto-list.component.css file.
Now, we will see the top crypto currencies in a nice rolling format.
Now, below this image, we will show all of Crypto currency data in a tabular format.
For this we need to first import MatTableModule in the app.module.ts file.
Now, as per the docs we need to add a dataSource and also the displayedColumns in our crypto-list.component.ts file. Here, we are making the dataSource equal to the data, we are getting back from the API call.
We have also added a function to go to the crypto-detail component.
Now, in the crypto-list.component.html file, we will add a new div to show the data in tabular form. The code from the table, we have got from Angular Material component.
Now, we will add style for the same in crypto-list.component.css file.
Now, we have a nice looking table with filter, showing all crypto currencies details in localhost.
Now, we need to show the details of a crypto currency when a user clicks on a crypto currency.
So, we will add the code for the same in crypto-detail.component.ts file. Here, we are taking the id from the params and calling the crypto currency with it.
Now, when we click on any crypto currency, we will get the detail about it in the console.
Now, we will add the html code for the same in crypto-detail.component.html file.
We will also add some styles in the in crypto-detail.component.css file.
Now, we will get all the data for the crypto currency in the detail page.
Now, we will add the logic to change INR to USD and vice versa. For this we will create a new service called currency from command line.
In the file currency.service.ts , we are using BehaviorSubject from Angular to get the selected currency. Also, we are setting to the next currency.
Next, back in our app.component.ts file, we will add this service and use the setCurrency() to set it to the value the user selected.
Now, we need to use the getCurrency in the crypto-list.component.ts file. Here, we are using the subscribe to get the value and assigning it to this.currency variable. We are also calling the getAllData() and getBannerData() in it.
Now, in the home page, if we change the currency it is getting reflected.
We also need to use the getCurrency in the crypto-detail.component.ts file. Here, we are using the subscribe to get the value and assigning it to this.currency variable. We are also calling the getcryptoData() in it.
Now, when we click on any crypto currency, we can change the currency in it.
This completes our Crypto currency ap. You can get the code for the same here.
