Angular Project - Cryptocurrency price tracker | Angular HTTP Client | Angular Material UI

hello everyone welcome back to my channel so in this today's video we are going to create a cryptocurrency application where we will be able to check the cryptocurrency prices there increase decrease in 24 hours change we can see the market cap and we can get some more information about those cryptocurrency okay so as you can see in this video that we have this application full ready so this is the quick demo of this particular application which we will be creating very soon all right so as you can see on the top we have this header with this selection of two currency inr and usd and in the in the second section we have this marquee created where we if we hover on this we can see uh the more details of this particular app here it will be mostly the top nine or ten trending coins which are visible here okay and we will be creating this banner as well for this crypto checker okay and below here you can see we have a beautiful looking table with a features of filter sorting and then pagination okay let's see one by one let's first try to filter if i search for btc coin we can see we are getting the information here for btc the bitcoin we can search our currency from here okay if we want to make use of what we see sorting if you want to sort by name we can see we it is starting from a now sort by descending order or the normal one we can see price trend as well the sorting works there as well for 24 hour change also it works and for the market cap as well so we can see the sorting also works if you come down here you can see the pagination so we have total 100 records and we are only visible in the items per page is 10 we can make changes here to 10 25 50 or 100 let's choose 25 to see if that works so yeah we can see it is it has changed and now it is showing only 25 records okay and we can see this also works the next page also works correct and we can say we are on the end page so this is disabled okay so for this we are using angular material okay and so if you want to get more details about this coin so what we can do is we can just click on any of this row for which coin we you need more information for example any information for this ptc so i'll just click here and there you go we are on this new page of coin details okay we can see some description about this coin we can see the rank we can see the current price of bitcoin and we can see the market cap as well the most interesting interesting part i would say is on the right hand side this is one of the best feature i would say of this application where we can see the price trends okay so this is 24 hour price trend in front of you you can see the timings as well on this horizontal bar okay and if you want to see the price trend for last 30 days so we can click on this button and we can see this graph is also getting updated same for three months and one year okay so this is the coin detail page here if i again go to the home page and let me show you the one of the best feature here that we can change the currency as well if you see the currency currently for all the coins is in inr okay if i change this inr to usd we can see the change got applied everywhere okay on this also and on here also okay now if i go to this detail page there also we can see it has been applied as usd now the coins and if you see the graph as well the graph is also now in usd it takes all the usd values if you want to change it to inner again you can see there will be a slight change in the graphs which shows that okay this is getting reflected okay so this is what we are going to implement in this video and if you ask me what has motivated me to create this video like create this application so i just went on youtube and just searched for this cryptocurrency app in angular and i won't find any video regarding to this cryptocurrency in angular so i thought why not build one application in our own technology which is angular right so that's what motivated me to create this application in angular okay so without any further ado let's jump into the action where we will create this application so first of all i will start this application from scratch so first let's open up a folder here and open up cmd in any of the folder and we will be creating we will be hitting some commands to create a new project so how do we create a new project it's very simple ng new and let's give a name to our application cryptochecker okay okay crypto checker yt let's give we are doing it for right so let's do that ng new cryptochecker yt so this is how we create a new application in angular okay it will ask for few questions as you guys know if you have seen my previous videos okay so if you know how to do all these things then you can skip this particular section so you can see when you're writing the answer is yes and let's choose scss okay and it will take some time to install few packages okay so let's just wait for it as you can see this application is almost done okay all right so once this application is ready all we have to do is we have to go in the project directory okay by saying cd space and crypto checker yt hit enter all right so we will be needing angular material okay so for that we have to install the angle material by saying ng add okay and the red angular slash material okay hit enter again i'm expecting few questions from this material as well so we will select that so please keep in mind that we will be selecting a custom theme because we will be doing it in in dark mode so choose a custom theme so he will ask for a question so you want to install say yes should ask for a theme to choose so i'll go with custom [Music] global styling say yes browser animation say yes and it will update your package.json as well accordingly okay so let's just wait for it to get installed okay as you can see the angular material is also installed in our project so now just say code space start to open up your visual studio code okay i will highly recommend to use visual studio code because it makes your life easier okay all right so let's first thing what what things we are going to create so first of all let's see our application and we'll start things off with this header okay so currently my application is running on localhost 4200 so for that i will be running this application first and let me just show you how to run the application button open up the terminal and if you hit the command ng serve so it will say that your port is already in used so we'll say ng serve okay and we'll use a different port we'll say port four one double zero so we will be using our development will be done on four one double zero okay so hit this command and let it get compiled all right so first of all let's see let's target what what things we required so we will be needing an header so what we'll do we'll try to write that header logic inside this app component.html okay inside this one and we will be creating two components the first component will be coin list where we can see all the list of coins okay just like this list coin and we will needing the second component called as coin details okay so let's first create those two components i'm still waiting for this to compile so let's let's just see how much time will it take so our application is compiled successful and we can see it's running on four one double zero let's open this okay so we can see we are running our application crypto checker white app is running so we need to start with this header so what we will do we will just go here and remove everything from here okay and let's save it now first of all we're getting this header so i am using material toolbar okay for that so let's go here and just search for angular material okay this first website click on components as we have installed this so we can use this very easily so let's go into toolbar and let's click on this api okay so we need to import this okay so let's go in our application and just import this in our app module.ts okay ctrl v and have it here as well so what was that it was matte toolbar okay not sure why i meant listens is not work so i'll copy paste okay so this is my math toolbar added all right so if you just go here in the match toolbar code in the examples so you will find few things like we need to have those spacer and stuff like that so i'll choose this basic one math toolbar and i will add my own inside that so let's copy this first one okay and the ts and in this css there is nothing so no need of anything for me at least so i'll just copy this one and i'll paste it here okay the math toolbar let's give a name to this we'll say this say it as crypto checker okay and we can add those spacer for that so that example we have seen this right this spacer so let's copy this css and go inside here and paste okay and for that we need this spacer so we'll go here and in the html so we will copy this pan and paste it here okay we have those for differentiating left and right okay so on the right hand side i will need a form field okay i'll need a form field for those two options because we need this drop down right this this one you need this and this button so for that what i'll do is i'll make use of form field so let's go ahead and create a mat form field so for using a mat form field we need to import few things okay so that's basically a selector and stuff like that so what i'll do here is i'll create a matte form field first so how do we have this form field and and select so for that just go here and we can see your fields and selects you can just select here so we need to have this in your app module okay so let's have this mat select module and we need some form fields as well so you can see we need this one to choose your uh option right to isd and inl any one of these options so for that we need those okay but we need a form field as well so for that let's search for form there will be a form field yeah on the top you can say form field so let's import this api as well so let's go here paste i'm just setting up all the material requirement right guys so you can also follow the same step so it is mat form field we don't need animation so we need more form field module so let's copy paste and let's remove this this is not required okay and we need input as well so i'll copy this one go here import copy this okay so this is uh somewhat ready that we have those platform field now we can go here and after the spacer we can say mat form field okay inside this matte form field uh we have to add few stylings okay so i'll add few stylings but before that let's add the matte select so we can have this mat select okay and inside the matte select we need to have the matte options so we have those matte options like this matte option okay and we have two options right for inr and second one for usd so we have those two options here okay so this will be inr and this one will be usd okay and these two will have a values the by default selected value will be this selected will be inr and the value we are going to give as inr same goes with here but this time the value will be different for usd we have to have here as usd okay so the mat form select is ready but all we have we need to add some um stylings as well let's save it and check if any styling is required okay so i have saved it let's go on the browser and check how it looks so we have this now we have this inr selection but i don't need this color okay so i need this dark mode for that because you can see everything thing here is dark mode so for that we need to do some changes what changes are required let's see that if you go here in the style.css so there is something added okay there's something added already here themes and stuff like that so what we will do is we will try to change this theme okay we have to change the stream to dark mode so for that what we can do is we just have to change this define define there will be a defined light to make it as dark if we save it and let's check what it it applies okay i want to change the primary also i want to change the primary color also to tv color you can see now this is in dark mode so this becomes a dark color now everything becomes a dark color i think let's go over this one maybe okay let's go with this one we'll try to change it if there is any requirement so currently we have these two options inr and usd so i want to if i refresh this i want to have this as selected okay so for that for that we need to have ng model okay let's make use of two-way data binding there is a concept in angular two-way data binding okay so we will we will be binding this option with this match select okay we have to choose that value right so what we'll do here is we'll make use of ng model on mat form field uh mat select i'm so sorry matt select so we'll just say ng model okay ng model and this will be our values selected currency okay i will copy this and create a property create a property where i have to create this property oh so sorry this has to be like this ng model okay and let's copy this property and let's paste it here i don't need this title anymore so i'll paste it here selected currency of type string and default value should be inr okay and you can see still there is an error let's fix this error because it says that we need to have we need to have this form select and yes we are using ng model so for ng model it should have forms module so we'll go here and add forms module okay once i had forms module i can see the error gone so now we can use ng model okay so i will be adding few more styling to it so let's change the matte select to the class as text small okay so we have this text sm let's save this okay yeah it's there because i haven't saved all long compile successful okay so what we need to do is whenever the value changes so we have to get those selected currency so the match select i'll have a value change a value change i will have to call a send currency okay and this will be our event the dollar event i'm sorry this will be a dollar event okay so let's copy this send currency and let's have it here below let's create the constructor first okay all right and below the constructor let's have our method send currency we have the event of type string okay and we can say the console.log to check what we get in the event okay let's see what we get in the event if i save all okay let's go and check what is there okay just now can you guys see we have this einer already showing if i just scrolled up this and if i go in the console if i change this value to usd i can see usd is getting printed if i change it to inr i can see i know is getting printed we can so that's what we are getting in the event we are getting those values okay all right so this is ready so now what we have to do we have to create the below part which is the banner okay and i think let's make it a fill so let's go here in the code and let's make it appearance as fill okay if you go in the mat form field okay we have this option for appearance we can say as outline save and check now this looks looks like an outline okay so we need to make some changes here to look it better okay so let's have it the same because our 10 looks very bad we can change it later on no worries all right so this is ready so like i would say the header is ready if you need to change something we can do it later on okay so now let's focus on the second part of this center one the crypto checker and stuff like that okay so for that what we will do is we will have to create two things correct we'll have to create a list page okay coin list page and coil coin details page you can see here we have a list page and we have a detail page so let's create those two pages so for that we have to create two components okay so we'll create the two components by hitting the command n g g for generate c for component and coin list component okay let's wait for it to get created all right that has created and it has appeared the app model as well so i'll create the second one which is coin detail okay all right i can see both are created now all right so now i'll go here and let's configure the routing if i go in the routing module i will configure both of the routing so for that i need to have a path my fourth path will be coin list and it will load my component as coin list component okay i'll configure the second part as coin details okay coin detail or coin details and it will load the component as coin details component okay and i will have a path for blank my path is blank i want to redirect it to coin list okay and path match should be full that's the full path and let's have a comma here okay so our routing is configured okay and now if i try to just show you the routing it works actually you can see the coin list now here and if i change it to coin details the spelling is in correct detail okay oops there is a mistake yeah we have to hit enter [Music] we can see there is no error let's see if there is error in the console if there is no then we are correct yes there is no error let's see why it is not showing okay so what is the mistake i know the mistake actually yeah we don't have the router outlet okay so we need to have a router outlet below so that it should say that coin list works and coin detail works something like that so can you see now coil detail works if i go back coin list works okay now we will be designing the coin list page so the coin list page has this banner and the table okay so let's see how we can create the banner so for the coding in the coin list we'll go here in the coin list and we will try to write our html first so we did it has a div as banner with the class okay i'll create a div dot container so i'm adding a container so i think for adding container let's create let's have the bootstrap also so for that let's go on the bootstrap website because i'm using a class container and that belongs to bootstrap so it lets better have it in your project let's copy this css and uh paste here in the index.html okay we'll just copy the css we will the gs is not required for our project okay now let's go here and write the next css for it coin list okay so we have a deep container and we will have a header so they've got header so there was a header part with an h2 tag which says crypto checkers yp okay and below we will have a h6 tag which says check all the cryptocurrencies check there's some some random word guys latest update okay something like this check all the cryptocurrency latest updates if you see here i'm just talking about this this one this one okay now so let's save and check the changes save it and let's check the changes yep so something is visible here okay let's try to style them also okay so now we will have a sub header so this is the header we have a sub header so say diff dot sub header part okay and for the sub header we have a marquee i have told you we are using a marquee there okay which has a behavior as scroll okay so it has a direction as well so we have a direction as left the marquee is coming from left and we have few events on mouse over on mouse enter all those things so on mouse over we have to stop okay we can stop all right and on mouse out we have to start or it is leave or let's go without one and we have to say start okay something like this we can do and we have to loop it for in finite so we'll say loop for in finite okay so we have a marquee ready okay and this marquee will have a row because every the detail was in a row manner so i'll say dave dot row [Music] okay and we can have our uh banners here so we can see this marquee which runs here this particular if i yeah can you see this coming so this is a marquee and html marquee which we are implementing so you can see on whoever it stops and if i out then it again starts so that's what i written here on over it was stopped and on out it was starting again okay all right so now in this whenever we do the api call first for example whatever api call you can see here we are i'm using coin gecko apis so if you see here on the website coin gecko api so i'm using this api so it provides lots of lots of apis free apis for us to use so i'm using all of this like not using all but yeah i'm using out of this i'm just using four apis okay so i will be sharing the github link where we can find all those apis all that four api which i am using so i'll show that in the video don't worry so how we i have implemented this apis and all all right so now let's go once we do the api call so that banner will get those four data this data which is coming right now here this one okay all right so now currently we have nothing here so we will not do anything but we can design that if you want we can once we have those banner data ready okay so this was the banner part let's save it and below below that we will be having our table correct so for that again let's create a container okay and container will have a margin top of three okay so this has to be empty not nd okay mt3 and inside this we will be creating our table so we logic of table will be coming here okay we'll create our table here all right so now first see let's create some of those uh what we say the header logic and sub all all of those right because we need that banner color and that okay so for that let's go here and add those image so this is basically an image so that we are going to i'm going to add now so if i go sure let me open up those images it's still opening i'm not sure yeah here it comes so i will be using this image so i'll copy this image okay and i will go inside my project directory in the asset folder so let's say reveal in file explorer so in the asset i will paste this the banner okay the banner too all right so now in the in the banner i will add those image so i'll go in the css okay so first i need to add those header let me add few css very quickly i'll give a height of 40 to that okay okay so there is small mistake so that means hide it will have a display flex split flex and i want to justify all the content to center so text align should also be center i want to do the flex direction as column okay justify content as center would be great let's see okay we'll see that if any change is required and my color scheme would be white okay and inside that we have h2 so this is the beauty of using scss we can write a nested css okay so font weight i'll give that first it will be a bold okay if you guys want to skip you can skip this okay so that's not a very compulsory you can you can add your own css there okay all right then so we have a font size as well we can give it as a ram 3.5 would be great i guess for seven five let's see we'll see that okay we'll give a line height of 1.2 and we will give a letter spacing because we need it right so that will [Music] be okay a3 something like this em okay it's a very small one little spacing and same goes for h6 as well for h6 i will be doing something similar i'll just give a color as dark gray maybe okay text transform will be capitalized font size i want to give a 0.8 rem okay phone family at this it is not required but i'll give a font weight one weight of 500 which is slightly bigger line height i'll give as 1.57 would be great i guess but yeah we'll see and we'll give a letter spacing of okay something like this okay so header is ready i guess so now we just have to do for banner okay for banner what we'll do we'll add a background image so for that we can say banner with a background image okay we can give a url we can just say dot slash we can go in asset folder slash sorry we have to see the banner select the banner okay so the banner is selected and we can give it a height as 400 pixel and we can give it as a width of 100 percent let's see if this changes and check what we have now okay so we have something like this ready okay right i can see but there is some some some mistake here that okay that that looks bad okay let me okay my project is closed i'm so sorry guys it got quite close let me open up okay so i have to run the project again so let's just wait for it to run i'll be back in no let's let's try to run it first and then let's see what happens ng serve the port was closed so we'll use the same port as four one double zero let's see okay but this banner is ready the css is ready okay but we have a sub header as well so let's do some styling for that as well so i have a sub header okay so let's add to subheader as we'll give it a height of 50 percent okay we'll say display flex and we'll align items center okay all right so this is what we have with us now and with this i think we are quite ready so let's see now on the browser let's refresh this again okay so we have this header ready with this cryptocurrency let's see how we can remove this one as well i see there is some okay i think we have this container empty s3 so let's try to remove it okay let's save and check submitter is ready okay so now this is not the issue this is for the below part but let's see what what can be done okay all right so we'll see this while doing an inspect let's see what what can be what can be done here so we have this router outlet yep so this is because of this p we are getting those those issues so let's try to remove that p because we have a p tag p tag in the in the header so let's try to remove that p tag okay this p tag is bothering us so let's remove it and let's save and check now it will get refreshed it is getting refreshed and there you go so we have this already now so once we have those data so data will also get reflected here so now but we can say this is ready so now we have to implement the table so before implementing the table let's do one thing let's try to do the api calling okay for the banner and for the table okay so let's go in the api so you can see we have these two api running let me inspect element and just show you those two apis the network tab okay so if you see here so we are using these two apis okay the market where we can see that we have this header value we have this currency we have this order description and stuff like that so we will be using this api for displaying the data and there is one more where which gives this particular trending values the trending values which you can see here okay so the two api has to be implemented so for api implementation we will be creating a service okay so let's create a service folder inside the app so let's go here and create a service folder okay and inside the service folder we will be creating a new service so for that let's make use of angular command line so we'll create ng for generate s for service okay we have to create service of api so in the service folder we are creating a api service hit enter okay so we have api service ready here we will add all our api calls and stuff like that okay okay so first of all we will see what is the first api we have to call so we have to call the first api for get all data okay we have to get all those data so for getting all those data we have to first go ahead and select okay we have to select the event so for that okay let's go here create get all data what i would say get the currency get the currency data so we have to do api calls so we have to import or inject http client okay http client so where we have to import it from you have to import it from angular slash common slash http okay let's give it a name as http client so we have a http client now if you're using http client so in the module we have to import http client module so we'll see http client module the third one has to be client module okay so now we can do the api calling now so first of all we have to get the currency data okay and then we have to say get trending currency get link trending currency and then we have to get the graph data get graphical data and there is one more get call get coin get currency currency by id okay something like this get currency let's remove this data okay get currency get trending currency get currency by id get currency okay get graphical currency data this looks great name okay all right so first of all we will be focusing on get currency like what we need to do for the get currency and all so we have to say return this dot http dot we have to do a get call okay and we have to pass the url correct we have to pass the url so this will be i will be passing the urls for get url so what i'll do is okay so for getting all those data i can copy those header values okay i can copy if you go here so i will provide this github link so it will be easier for you guys okay so as you can see i have something here as a currency okay i have a currency here uh which says that okay if i just remove this line so i need to have a currency here so i have to select a currency so you want the currency in which inr or usd so i will put the currency here of type string okay and this currency has to be sent it here okay so this is the api okay and this api has it has already order by market cap and all those things so we just need to pass the currency if you have wanted it inr then i have to pass inr if i want to have it as usd then i should have a usd here so this this get currency is ready okay and then we have a trending right we need to have those trending where we have those 24 are like we we have seen that banner right guys this banner data so this is the trending last 24 hours which are trending coins so the banner data is for that so let's go ahead and have that epa as well so again that will be same it will be return this dot http dot get off type any and inside that i am using this backtick okay because this is called as a new way of doing interpolation in es6 so this is a backtick which is the left button where you can see and we have one right it is the left of that backtick okay so for that again i'll have the api ready with me so i will be sharing this with you guys don't worry you will find these things in description so this gives me the trending the trending currency of last 24 hours again i have to pass the currency here as well and i can remove everything here and i can paste it here currency okay this you can see the change is in 24 hour whichever the famous it gives those trending currency value okay now we have for the trending like for the charts okay we're getting the graph data again i have those api ready so i'm just pulling those apis for you copy the api and again i'll have to say return this dot http dot get off type any use a backtick and i'll paste it here okay this requires three things so i'll have those here okay so i need to have a coin id of type string i need to have a currency of type string and the last one i need to have days so whenever you say we need to have for 30 days or one month or 365 days so we have to provide the day's value as well so days okay so this is days this is currency and this is coin coin id like for which coin you want right so this is coin id this is currency this is d forget to get the graphical currency and now if i say i want to get a coin data a specific coin data so for that the api is little different so let me first finish this return this dot http dot get off type any and inside this again i'll use a backtick and i have the link as well with me so i'll just copy this link for you guys and paste it in here again this will be provided in the description so don't worry so for getting those my id so i'll say coin id has to be passed okay so i'll pass the coin id here and this is not required now okay so as you can see our api is ready so we just have to call all these end points to get those records okay so for the coin list page i need to use this get currency and get trending currency these two apis okay so let's see how we can use it all right so i go in the coin list okay i'm the coin list now i want to use the api so i'll say private api and api service i have this imported on the top you can see auto imported so i have to import this and i have to inject it here in the constructor first of all i want to say get get banner data correct i have this banner data right so for the banner data it was a trending one correct it was getting those trending records like 10 top 10 or something like that so first of all we have to get the banner records so for getting that if you have remember that we need to pass the selected currency correct selected currency so we can pass a selected currency by default so for that let's say this dot api dot get trending currency it asks for a currency so i'll say i want to have the inr okay i'll say dot subscribe response and what i want to do here is i want to just say i want to store it somewhere let me just do console.log to show you the record console.log and i can show you the record as a response what i'm getting in the response okay same thing i have to do for getting the data so i'll say get all table data right so get all data for that i want to call again this dot api dot get currency dot subscribe i want to subscribe that that's how i do api call so can you see in the get currency it accepts few things right what was that it accepts the currency again so i need to have a inr i need to get the ini details again if i go in the console.log console.log i can just say the response here okay now i will call these two methods in the ng on it so i'll say this start and get all data and i'll say this dot get banner data i have saved it and let's see if our application runs successfully yes it's compile successful and let's open here the crypto checker yt okay so now if i go in the console i can see two is i can see a top 10 which is the trending one bitcoin ethereum and all these things i'm getting all the response here can you see the all the response i'm getting and you can see the 100 also which is the table which is the table api correct bitcoin and all this stuff so i will be using this array in the table and this array in the in the banner okay this one so let's use them all right so let's go here in the code let's go here with the marquee and in the marquee we have our data right so let's store the data first we are not storing anywhere so let's create two property property number one banner data of type any and if we have a table record right so for the table record again we can we can select any or we can make use of data source for storing those record because we will be using uh what we say uh we will be using that angular material so we have a data source so then let's do it for banner data so in the banner data i can say that this dot banner data is equals to the response okay so i'm sending the response which i am getting from trending currency so this panel data i will be using here okay so we have a ng for write a directive so we will be using those ng for directory to loop okay so we we can make use of this in ng container so we have our ng container ready inside this we will have star ng for let row of banner data okay and inside this we can write our code deep dot cool one i'm using cool one and i can say dave dot card inside the card i have image okay image and i can just say this here as i'm getting a record from the api lc row dot image okay i'll give it is a width of 100 and let's give it a class not sure if it's required so let's let's give it as image fluid it's a bootstrap class by the way guys okay and this card will have a body so to start card body and inside the body we will have a title okay the title we can give as like what is the trending that is going and all those things right we can give a symbol and stuff like that so let's do the interpolation i'll say row dot a symbol okay this has to be using a pipe of uppercase correct paper is upper case and now i will have one more thing in term of percentage so i'll have a span here okay inside the span i will have a class in this text danger i'll give you i'll tell you why we i have this text danger but yeah but before that let's try to interpolate few things like what is the percentage performance so it is row dot market cap change if you are like have a question where this name is coming so you can just refer the console.log you will find it there so it is the percentage 24h okay if you want this if you want this detail so you can just go in the console.log here and in the object you can find those details that's why i did the console.log if you go here you can find all those can you see this i was using this one 24 are change okay so now you can use it here if you just paste here so it is the same one okay for me and this is a percentage so we can put a percentage here all right and below that we will have a p tag where we have some description or something like that we have this price right so we can select that price with the with the class s card text we have a class as card text okay and we can just give the interpolation here as row dot current price correct and we can make use of a currency pipe we can say the selected currency is it there no it is not here right now but yeah in future it will come so we need it in inr okay so let's save all these things and let's see what we have okay can you guys see our card is uh something is something is actually coming like we can see those details now uh in term of cards so now we just need to style a bit so let's do the styling so let's go in the scss file and we have to do some styling for the cards guys so let's go down here and just say dot card okay so we have to give the border so there was some border so let's remove the border we give the background let's not have this we need to have not diagnosed as a background as a transparent okay we can give the color as white okay padding is 10 pixel we give some margin s40 pixel what else we can give a width of 100 pixel and we can give a height of 200 pixels to make it little rectangle okay and inside that we have those image right so for the image and give a width of 70 pixel i guess 100 was not good and margin has zero comma auto to make it center okay so inside that there was an h5 which is where h5 i'll give that a font width phone bit as 500 and there was p tag for the price so for p tag i want to give font weight as a little bigger one and let's save and check okay so our car we did some manipulation there okay let's save and check can you guys see now this looks little better okay so this was the price and this is the ptc and those those stuff okay so we can see all those things now correct so our header and our banner is ready if you hover on this you can see it stops if i hover out i can see it is again starting okay now what we need to do is our once our banner is ready we have to focus on the table okay let's put our focus on the table for table i will be using again the angular material so we have something here in the table okay go in the api let's import this math table so go in the app module and have this put there okay matte table module okay and let's go in the example i will be using the page nation one so let me just search for that because i want all those features right this table with sorting page nation filtering so if you just copy this code go here you can just copy this whole code okay we have those lists right the html okay so just go here and remove or maybe below this let's paste all of this okay i know there will be some lots of errors but yeah we'll fix it slowly okay now let's go in the ts file and let's copy a few of them maybe we'll need all these things let's copy all and let's paste it here on the top there is some repetition so i'll remove them okay or maybe i can have these two because this imports are same so i can have them here and i can remove this one i have these three things so let's see how to use them okay i will not have everything guys okay i'll just i'm just seeing what is the actually required so i have this data source and these two guys let's copy them and paste it here data source just add this thing and just add your any okay so this is the mad data source and let's have your this exclamation which means that it will be initialized in future so it's in typescript compiler okay it's in typescript error okay so we have removed that error now now let's see what else we required so now we need to have this data source to be used so we can just say here this check delta source as this so what we'll do here like we have this get all data right so below here just say as this dot data source and put the response inside the data source so now this will act as our data source okay all right so once we have our data source ready so we need to do the pagination as well right so we so that it should uh follow your pagination data and stuff like that so for that what we'll do is we need to have the data source dot paginator so if you go down here we have these two right so just copy this and go below here and paste it okay so this looks better now all right so now our pagination should work that's the reason i did these two things let's see what else we have to do yeah we have to apply filter so let's copy this let's paste this method down so that our filter should also work okay let's see what is the issue yeah this is extra i guess yep now let's go here and see what we need to fix in the so i can see there is a display column okay so we have to create the displayed column but for us it will be little different okay so first it will be different quite different because we are not using the exact same so what i'll do here is i'll just have this ready with me so i'll just copy this and paste it here maybe you're on the top so this is our displayed column okay which has symbol which has current price price change 24 hour and market cap this is the api value guys this is the api value if you go here in the table so we have this coin we have price 24 hours change in market cap so this is the api naming okay this is the api name if you go in the console and check this is the api names so this is our displayed column let's check what is the next two error so it says the mat presentator because we have to import the pagination as well so let's go in here and search for page nation this is the degenerator go in the api and copy this okay and we can paste it here in the app module as like this something like this and we can just say here comma mat paginator module okay and we can see the error gone so now we have zero errors here okay zero errors everything looks good let's save it and let's see if that is compiled okay yeah so compilation is success let's go in the application and check how it looks so we can see there is some error is coming okay so we have to fix these errors let's see it says that couldn't find id with symbol okay i know this error so what we need to do is okay we just have to go okay let's go here let's open this and i know this is coming from this guy this id and all those things are not found so we have to match that right because it is not able to find those id because we need to match it correct so for matching it what we need to do is we just have this let row correct row.id there is no such id found so for us it is symbol correct it's it's a symbol and we want it as upper case so i'm using the upper case pipe correct then we have row dot current price or we have the current and underscore as pipe price okay and this should be a currency so we can use a pipe as currency so if you have doubt in what i am you what is all these things so these are the angular pipes or by default pipes i'm using it you can you can search it on the google or anywhere it's quite easy and straightforward so we have to specify what is the currency so my currency is inr i'm doing everything for inr right now okay so we have the and let's change it the first world one was coin right the first one was coin the second one was price the third one was 24 hour change the last one is your market cap okay and we need to change this row dot market cap all right and this is also a currency so we'll say as currency or we can copy paste from the top as inr okay in this 24 hour change so this is price change underscore percentage underscore 24r okay so let's change it to that price change percentage 24r okay and this is a time okay whatever it has changed so it's a basically a percentage so let's have it and let's save this okay so let's see what else we have in error to solve or not if i just check something else is breaking so let's see what is that it still says that id and symbol let's check what is the problem see i'm doing everything in front of you guys so there is okay so i can see the problem again so we haven't changed these things so let's change them the column def the column def control v [Music] this has to be your current price so this is current price this is your name change to this and market cap change to this okay so this is display column just looks good we need to make some click event in future let's we'll see that later okay rest everything looks good to me all right i can see i have refreshed the page and wow i can see the table but the table looks little bit bad because of some bad css so let's try to fix the css okay so for fixing that we must require okay let's go in the material i think i haven't imported the css let's go in the tables and example let's go down for our example which we have used this one and we can copy the css from here okay let's paste it here in the last okay ctrl v and save and check wow this looks better much better i would say okay and i can see there is a filter but it is not visible so what we can do is we can uh create this as a back background as dark so let's do that okay so i'll just copy the css okay i'll just copy this css for me at least so i'll just say here i need that color copy this color and i will go in the style.css okay and in the body i can say as color not a color but as a background color background as it will be as a dark okay all right so let's see what else is required here it is not taking that color let's see i'll just okay it changed because it was not refreshed now you can see it has refreshed and you can see the changes okay and i can see whatever i'm typing here i'm not able to see it i'm not able to see them so let's see what is the issue here okay let's change the filter to some different style so let's open this go in the list and we have this here on the top i'll say style as color and we can give any white color which is better okay and we can see those changes now okay and if i type anything yes it is in white colors i can see the images are not showing let's see what is the issue is there an error for that no okay let's see that should it should display the images so let's see let's go in the list yeah so we just have symbol guys so we have to have that images as well right because we can see that it was showing for us so in the ng container for the symbols so we just have those image so what we can do is in the td in the td we can have a span and then we can have an image so let's have this thing in a span okay we can have this thing in a span so let's say ctrl x so hit enter f make it better and we will have a span tag and inside the span tag i can paste this symbol okay and let's keep it as a class as mx2 to give some margin horizontal margin and let's have our image okay and for the image it is row dot image image and we can give it a width of 20 or maybe 50 is better little big let's do the property binding and let's save this okay let's see how it looks now okay now we have this thing ready so i can see the images and we can see the pagination is starting from 5 for us 5 10 and all those let's change the number and let's do it from 10 then 25 then 50 and then 100 this is much better okay and now i think we are good with the this part i think we need some spacing if i'm not wrong so for that what we can do is we can add few spaces okay i can see the space are not looks very bad so it is all dependent on you that how you want to make the changes so i have things ready with me so i'll just copy those things and let's go sure in the css because css can take time so i'll have these things ready already so i'll paste it yep so now it looks a little bit better now we have this thing the header part prices stuff like that okay let's try to filter i'm not sure it's working or not let's check it btc yes it works [Music] but i see the sorting doesn't works okay let's see what is the issue with sorting and what about the pagination your pagination works better so let's see what is wrong with the sorting okay let's see if we have any error while clicking it no we don't have let's check what is the issue so we have a math sort okay so let's go here and let's see for sorting we have to import something so let's see where is the sort so we have a sort header okay we have a api so let's import this mat in the module let's have it here as well matte sort module okay let's save everything and check you can see it works now correct much better all right so now we can see our main part is ready our way why i say this mean because here we have did the two api calls same thing we have to do on the click of this whenever we are clicking here we have to go to the next page right so we will be implementing that now so to go on the next page it's what we need to do we just have to click here on the row and while clicking we have to go to the next page so for that what we need to do is we need to have a click event on the on the row okay so you go you're in the list of coin there will be you find a tr here matro there will be one tr yes this is your metro right so here you need to have a click event okay click event this click will go tell you to go to go to details this is a method okay so we have to create a method as go to details and this method will what do this method will help you to route okay help you to route so we'll take the row value from here while sending let's create this method maybe below here and we have a row value why we have over because we need to send the id as well correct so we have a idea inside this row so we have to route to the next page okay let's go here in the routing and change few things that coin details slash id we have to pass a id as well okay to the coin so if i say coin details of bitcoin so it will be coin detail slash bitcoin something like that so we will pass id okay so while routing so for the routing we have to import in the constructor router so let's import a router this is incorrect this is the router okay so this is imported on the top as well and now we'll say okay you have to go to the page so we'll say this dot router dot navigate and while navigating we have to send the id okay so we'll say this dot router dot navigate while navigating where you want to navigate to the coin detail and we just need to pass the id so row dot id we have to pass so let's check if the name is correct yeah the names is correct let's save all and check what we have so now if i click here i'm going on the next page correct i go on the next page so but you see on the next page everything is black so what we need to do is let's go here in the css okay and in the coin detail css let's make everything color as white let's make all the color look as white okay let's try it again if i go here i can see coin detail works because we are implementing some dark mode and stuff like that okay now coin detail works so here we have to do something like this something similar okay we have to implement this detail page and then the start page all right now for that what we'll do is first thing we have to call the api get details by id correct so we will do that first and then we'll implement the chart for chart we need to have a chart.js library or we can use ng2 chart there okay so let's try to code in the details part so first thing as i told you we will focus on getting the details okay getting those coin details so we need to have the coin data api first so let's create a coin data property of type any okay we need to have a coin id correct of type string so we can say something like this we need to have days in number and then we need to have currency of type string equals to inner okay now so this is ready now we have to call the api service so i'll say private api api service all right and below down we have to call the coin data so we have to get the coin data so we'll say get coin data so so getting the coin data we need to have the id right so for id we are getting those id from the router okay so in the router we are passing the id right so we'll say private activated route and we'll get those id from there in the activated routes okay now how we can get those details i can just say here this dot activated route dot params in the params i have the side is also subscribe okay so subscribe the value and inside that i have my id okay so for getting those id i'll say your this dot coin id coin id will be is equals to your value id so this id is what we will get from the route for example let me just show you what i'm trying to say if you see i'm coming on the bitcoin right so this id this is the id so this id i'm passing it here in the coin id okay so i have a coin id ready with me because for getting the data i need to have coin id so i'll say this dot api service dot say get currency by id and it accept a coin id so we can say this dot coin id okay and we can subscribe that can say the response and we can say this dot coin data is equals to your response okay so we have the response ready in the console.log okay so if i save it and if i try to show you what we get in the console let me just do a console.log console dot log this dot coin data let's save and check okay if i come here if i go back let me inspect element okay now if i click here in to this one okay i want to see something in the console that's it's not printing okay that's because we are not calling it so in the ngo net we have to say this dot get coin data okay and now if i refresh the page i will see a coin data details there can you guys see i'm getting this coin data and you can see the id is bitcoin symbol btc name and so many informations you can see so many informations we see a description as well right description in english en so we need to have this description to be visible just like this just like this we need to have the rank the currency price the current price the market cap and everything so we will be implementing that here so but the api call is done so let's write the html and css okay all right so i go here in the coin details component and again what i need to do i need to divide this into two parts right so for that i'll use of make use of your bootstrap okay so dip dot container okay inside that i will have a div dot row and inside the row i'll have div dot cool md3 dot details all right inside that i have a tape with the class as image on the top and we have image inside that okay we can give it a source as coin data let me make this as uh coin data inside the coin data i have a image and i want to use a large image i'll tell you what is this or why i'm getting this from where i'm getting all these things in a bit okay so this is the image so if you just go here in your in your console if i again just show you the console if i just refresh this i'm not sure if it is there yet it is there in the object can you guys see we have an image with a large so that's what i'm using coindata.image.large okay so this is the image which is ready all right and then we have a h3 with text center okay now this will be your name so coin data dot name okay and let me put some styling here i want to give some font size different font size size of 23 pixel okay so this is the name all right and now i need to have those description so h2 h2 with an inner html and inner html i'm giving it the description for description i want to say that okay a coin point data dot description description so inside the description we have option for english so en i want to split them i'm going to split them display the data wherever we have a full stop i want to split from there okay till there i need that so till there i need the data okay so i am splitting that data so this is the h2 ready okay so there were some more details about that so i'll create this dot more details okay and inside that i have those rank price and market cap right so i have a span span with a class as title and inside that i can give as rank and i will have one more span this time with the value class as value and inside the span i will have again that coin data market market cap rank something like that market cap frank okay again okay something is wrong yep i need to have this one more this is correct i'll copy this two more times paste the first one when i want to display the rank second thing i want to display the current price and the last thing i have to display the market cap okay okay so how do we do that so again so i if you just want to follow the same thing you just go on the api and you can see in the console whatever you want to display so i want to display this currency and if we have those inr for the market data as well right so market data.market.inr so the market cap is visible from here okay again this is also a currency so i'll say currency currency pipe is ready okay and now this has to be a br tag so that should be in the next next line br okay so i think this looks better i guess let's save and check and go here now i can see this looks better so we just need to do some styling a bit and i think this is ready okay again you can see this it only shows the 100 characters that's not the 100 the character which uh wherever the full stop comes okay so it just takes that particular string let's try to do something in the css okay so see this is not a very big thing so we'll change that in a bit so what else i can do is i can just copy the css and paste here and you can take the reference from the github i think that will be great to have it okay you can have a reference from my github link i will provide the link for the same okay now if you go here you can see everything looks a little better so we have this thing ready so we have our bitcoin name if we go back if i select ethereum i can see ethereum here again go back if i take usdt i can see usdt here and stuff like that okay so this is ready now i just need a graph on the right hand side okay so for getting the graph we have to download two things first let's let's firstly what is that graph coming from we are using ng2 chart in angular so we are using ng two charts so for using this two uh ng2 chart we have to follow a few steps so we need to install this okay so let's go in the powershell to install this and we need to have the chart.js as well so let's do it one by one it is installing that let's install so install the chart.js now so once both of them are installed so we will be proceeding with the implementation of the graph okay yeah both of them are installed so we'll go in the coin details we have to add so many things now first of all we will be starting things off with some imports okay so we have to import few things so let's see what is that so we have to import from chart.js so what is the first thing we will be importing we will be importing chart configuration chart configuration then we need to have your chart type two things okay and then we have something in ng2 chart very important thing this will help us to update your chart so we have this from ng to chart so ng two charts this is called as your base chart directive base chart directive okay these two is very important guys okay so now once we have these two what we will do is we will first create your the data sets okay so for creating your data sets things are very simple uh all we need is we need to have a line chart data okay so it's a property basically let me have it here so it's a property with this one so you can pause the video and you can check whatever we have written here so it is a line chart which is using this particular interface as a data and it has a data set as blank currently it has a label as price trend which has a color background color bald required and stuff like that okay and the label is also empty guys because we will be filling this labels and data dynamically in the chart that's why these two are empty okay and in the same way we need to have chart options so again this is a a property of chart options just like this public line chart we will have one more called as chart options this is nothing but just a small configuration change in your charts so we have this element as point radius as one scale is empty so we can remove it plug in we have to display the legend so this is true and stuff like that small configurations that's it okay and we need to define what is the chart type so we we need to have a chart type as line chart right so we will just say public line chart type with the data type of chart type which i have imported on the top and line chart okay so this is done so what is the last thing we need to do is before starting the chart we need to have the view child view child here we have to say base chart directive here inside this and my chart my line chart i would say the good name is my line chart and this will be of type base directive okay all right so this is if these things are ready so all we need to do is we have to just update our canvas so we just go here and go inside this so we this is the cool md3 right so below this we will say div dot co md nine okay or we can say it as three or let's take it as eight and we will just have some space there okay so we will be importing the canvas now so what is that canvas so canvas is nothing but your uh the options and stuff like that whatever you will be using now so for example the chart will be rendered in a canvas so but we need all those data right so we need to have the data data is nothing but your line chart data okay so this is line see chart data so you know you'll see there is an error so how to fix it very simple you just have to follow the procedure i think i have to skip that you just need to import that's it once you import this things will be easier import the chart ng chart module ng chart module and you can see your error is no it's still there let's see what is that let's over on this and check what is the error current us in the known property of canvas okay so it is the known property of canvas so what we can do is we can have your base chart okay and this base chart directive will help us to take this data okay all right so now what else we need we need to have options the options which we have there so it has options what is the option so it was line chart options right so line chart options okay and we have a type here so again the type we have mentioned on the ts same thing we have to mention here the type it is line chart so the ceo's caps i guess yeah line chart type okay so this is our canvas we just need to style them and give them a width so i'll give a width of 300 pixel maybe it will take it automatically let's save all and check if we have any error okay it's generating in mendel's let's see okay it's compile success uh let's see how things on the browser if i go in the detail page yep so i can see a chart is getting rendered but yeah there is no data that's why it is empty but i can see something is here now okay so now we have to fill the data right so for filling the data again we have the api call the api was getting the record getting the chart data okay so we will be doing that get graph data let's create a method get graph we can say this dot api dot get graphical currency data and this accepts will so many things it accepts coin what is the coin id so we have a coin id right so this dot coin id it accepts a currency what is the currency type you want to give so inr i can give the currency type for how many days you want so i want to have the data for one day okay one day i think the day should be in in number let's see i have to fix it so let's go in the service and change it to number i hope this helps change to number and yep there is a problem here as well i'll have to change it to number yes daisy number that's correct what i just changed i changed that oh sorry i changed the coin idm so sorry guys let's undo [Music] this is the currency this was the graphical data and yeah this one has to be changed number okay and if i go here the problem is solve and i will say dot subscribe and then the response i can do console.log okay and i just have to call this in the ng on it so i said this start graph data let's see in the console what we get okay and again we have don't write data because we haven't put it that data and labels so but let me see in the console i can see two objects let me refresh it again yep so this is can you see i have getting the prices volumes and so i will be using this price this prices for displaying the price trends okay so this has two data it has time and the price okay so we have to use the time and price to plot here so on the y-axis it will be price and on the x-axis it will be your time okay so let we have to create few logics for that so let's see how we can do it [Music] okay so till here it was okay here like graph data and stuff like that now what we have to do is we have to say this dot line chart data dot data sets inside that there is a data sets and inside the data set there was a data so inside this data i have to pass the prices right so the first one was your zeroth element was time and the second one was your your second the y axis data which was the price so i'll say response dot prices dot map so inside the map what i'll do is i'll return that particular second element okay i've written the second element so this is how it will get the data but i want to get the labels right so for getting the labels again we have to something similar so this dot line chart data dot labels okay inside the labels i'll say response start price prices okay dot map and inside the map again the first element i want to send but it has to return a time right so i'll say let date is equals to new date so a of zero so we get our it we have converted that because it is not uh if you see on the browser it is not an action it was not an actual date right it was something one six one seven so we have to convert that first to a date when the objects you can see it is not an actual time it's some it's a different time format so we have to change that first okay so we have the state now and now let's convert this to time so time will be is equals to date dot get r if it is greater than 12 if it is yes if it is greater than 12 then what i'll say i'll have to print dollar i'll say date dot get the hours minus 12 okay and second will be your again dollar your date dot get minutes that's all and this will be in pm okay if this is this and if not then what you'll do is copy the same but this time this will be your am value by removing this 12 correct so am npm so now this will be your am value okay now we have to check return if our days your days value is equal to equal to one if we need for data for one day okay so for that return time if not if not then please return date dot to local time something like this so this will return your time accordingly if i save this okay let me just go on the browser i can still cannot see anything yeah but if i change something i can see there is a plotting happening with the one day of time this can you see the time currently is one point one it's one point three two like sorry it's one in the night so can you see the time gets plot for last 24 hours okay because we have the we have selected there as one day correct one day so we are getting data for one day if i make this as 30 so it will be for 30 if i make it as 30 okay if i make this as 30 again i'll have to change on the top also as 30 so now you can see now the data but can you see i'm not getting the data instantly if i click here and then i'm getting the data now this is in date can you see it's four five six seven eight nine april till me okay but i don't want this so i want to update the record once i have a data correct so what i will do is i will create a set timeout i'll have to do something asynchronous now so what i'll do is i'll create a set timeout that's how we have to deal with deal in angular so we have this set timeout and we'll say this dot my chart dot chart dot update so we have to update the chart if i save this if i go here and let me just see yeah can you see i see now i'm getting this if i go here and click here the chart is coming automatically i don't have to refresh or again close and start okay but this is all dynamic right now if you see everything is dynamic i have to write the dates i have to write the ina i cannot see the usd change still okay so how can i change that okay so because we have to use those things right usd and inr so for changing those we required something an angular which is behavior subject because we have to pass data correct we have to pass data in different different components so we will be creating a behavior subject okay but for sending those days and stuff like that we'll see how we can how we will be able to achieve it so first of all we will be focusing on changing the this taller and ust usd stuff okay so let's create a behavior subject in your angular all right i will create one more service okay i'll create a service now as coin service or currency service in the service folder let's wait i think it is taking little time so there you go the service is created and let's go in the service and create something very interesting i'll create a private selected currency it's an observable behavior subject selected currency of type behavior subject of type string close to new behavior subject of type string and we can provide the data from here selected will be the first will be the inr okay and let me create a guitar and setter for this so i'll say get currency okay the gate currency i'll say return this dot selected currency dot as observable okay and i will have a set of this bill so it says set currency and i will say this dot selected currency dot next i can pass the value whatever the currency user will set okay currency a string and i can pass the currency inside this okay so this is how i will create the getter and setter so this should be get and that should be set so our service is ready currency service is ready so what i need to do is so where is that changing it is changing in app component right this value changes so what i'll do here is i will import this inject the service first i'll say private currency service of currency service okay and inside this what i'll do this event we will see in this right this event has your value of your drop down it should be inr or it should be usd so what i'll do here is i'll say this dot currency service okay currency service dot set currency i want to set the currency i'll pass the event here okay i want to get this currency where in the lists okay in the list i want to get them so again what i'll do here is i'll just say comma private okay currency service okay currency service and i want to get them here so i'll say okay so let me create a service here as a currency here of type string and selected currency will be inr all the time okay but whenever i came here in the ng on it i'll do yours this dot currency service dot get currency dot subscribe i can subscribe then and i can see this dot currency is is equals to your value which i'm getting from the observable okay so this is how we set the currency value and wherever i'm getting get currency i'll see here as this dot currency and again here also i'll say this dot currency okay and whenever i'm getting the currency i'll say here this dot get all data with an updated currency correct and this this dot get banner data all right and i already have the this ready right will remove this inr and i can replace it with the currency which i have okay sounds great so again this also has to be changed to ynr let's save everything and let's first check for any error is there or not i can say compile success so what i can do is i can change it from inr to ust i can see there is change now can you guys see there is change deflected there is change deflected not on the detail but here on this page if i change it to i now you can say the inner value here if i change it to usd you can see the usd value here okay and this way we are able to change the currency in the in the coin list page same thing we have to do for the detail page if i change it here to inr or usd this should be changed okay but it's not changing so let's try to do it in the details page as well so i'll go in the details page i will be doing similar thing here as well so i'll say private currency service okay something like this and inside this current service again here i'll say this dot currency service dot get currency dot subscribe this and i can get those values so i'll create a survey and get the property as currency is already there on the top so i don't have to do much things so i'll say this start currency is equals to your value okay and once i have the value i can replace this with my currency i'll say this start currency make sense what i can do now is i can just directly call it so i can just say here once we have the data so i have to refresh the data right so for refreshing it what i'll do here is so i have this coin data ready okay i'll say this dot graph data okay so currently i have this dot coin so again i'll say this dot coin id whatever quantity i will have okay comma this thought currency yes i'm getting this currency as well and i can say the 30 days okay for getting those d record so okay i did a mistake here i just have to call the graph data because it is not accepting and so sorry guys we just have to call the graph data but this time the currency will be updated okay if i save it let's see if that changes the graph or not okay because i have to see there okay if i go it is refreshing if i change it to usd yeah there is a change in the graph if i change it to inr there is a change in the graph can you see this price is here it's in inr if i change it to usd it's changed to usd now there is no change here because we have to do something little different here but the graph is changing so i'm happy so this is changing so now what we need to do is so here for changing the coin data we have to write some some some different logic so for example what we'll do here okay we can do something if if this dot currency okay her currency is equal equal to usd okay if this is usd then we have to make some changes okay what kind of changes we have expecting we have to change the response okay we have to change the response from the usd so i'll say response dot from inr i want to send all the usd okay so i'll just say here response the res dot market data dot current price dot inr so whatever it was in inr change them to usd okay same goes with your market cap so we have two prices right so same goes for them so if the market data the market cap is inr change them to usd okay if this is not the case then keep it as it is if this is not the case then keep it as it is something like this okay something like this and i can pass them below this okay so it will first check for the condition and it will do accordingly if i save them okay and i can just change here as well that i was having those currency currencies so i can create the pipe has currency here and currency here okay which is in inr ufc depends depends on what user has selected from the top okay so now if i go here but try to change it to usd i can see it has been changed this is changed but i think the price is still the same let's see why yeah it is only changing this thing so we have to check if api is getting called or not okay so we have to call the api again so we have to say that this dot get coin data in this subscribe in this service okay where we get the currency let's save it and check if that changes the value or not yeah and go got refreshed and if i change it to usd yes it is change to usd by changes to inr it is changed to inf all right now what else we need we just need the last part which is the buttons below here you see these buttons 24 hours 30 days three months and one year so we just need these four buttons so let's try to implement them and we can close up this video alright so for that what we can do is we just have to do some thing in the html okay below the canvas so wherever we have those canvas we will just add a small but like four buttons there below this canvas okay and let's create a div div dot class so we have to create a class as d flex display flex and justify justify content around okay something like this all right and then we will create the buttons p u t d o and button dot with the class as btn dot with the custom button as custom i'll create a custom button for them so this is the class all right and every button will have a click event where it will add a few values so where i have to get the graph data okay get graph data okay and we have to pass some parameter inside this all right so we'll see that how we can do so first of all copy all this and paste it four times we need four buttons right so first we need to for one day we need to have for 30 days then we need to have it for 90 days and the last one was 365 days which is equivalent to one year so this is one day this is 30 days okay i hope that makes sense or we can take it as 24 hour depends this has to be 90 days and this has to be one year something like this okay now what we'll do here is uh you can see this exp now this we have to pass a parameter here in term of days okay this days of type number and now what we can do here is i can say this dot days is equals to days which is coming from the top and we can just remove this this from here and i can say if this is equal to equal to 1 then do stuff like that or we can keep it as it is it will not bother anything but yeah so we can change them now we will have to change it here as well so we can just say this dot days and this start days again okay and we can save them now let's create the css for that btn custom so we have this btn custom ready already and you can just have a change we have a look there okay so we have this button ready if we click on 24 hours so we can see the time changes 30 hour 90 days and one year so but there is no change in the data let's see why why is that so because the data has to also be changed so whenever we click okay on click of that it it calls that update okay so we have to see that update record all right so let's see what is the problem here we have the update call here let's make it 4 second and let's try to check it's not 4 seconds 4 000 ms i change it to 30 days the time is changing but not the data okay we will have a look we'll have a look here let's see let's see in the console if we have any errors there is no error so let's see what is wrong what is wrong here i can see it says undefined where is that the coin data is undefined okay let's go back and let's check the graph again so we have a graph for 24 hours we have it for 30 days yes we have it for three months we have it for one year you have it again for 24 hours yes this works now i think there was some issue with the with the refresher there may be some cash not sure yes it works one year it works yep things works let me change that time again to 200 because it is way faster then and let me just have a look yes it changes very fast so in this way we have also implemented this where we can see those records oh so sorry it was for the previous one i'm so sorry guys so it was for the previous app not for this one we have to see what is wrong here okay so let me just check what is cannot see where is that change but we'll figure out very soon okay let's go in the app and let's see what happens here so whenever we click here it calls that method and it puts the days here and do the ah this is the issue guys can you see the issue so here we need to have this dot these correct and now if i save it because every time it was 30 days it was not refreshing then so now if i go back again okay and if i click on 30 days you can click on 24 hours if you click on 90 days click on one year i can see those changes now okay so the problem was with this 30 and let me see if anywhere else i have used that answer is no okay so now it is dynamic so we can see the dynamic changes now applying to this particular crypto checker yt let's check it one more time so we have 24 hour we have 30 days we have 90 days we have one year and if i change the price also so there is change in the graph as well okay which means our app is running great all right guys so this was all about this video where we have created this crypto checker okay from scratch so we have seen what all steps i have followed and it was all step by step procedure but still if you face any error or issue so you can just ping me in the chat i will be definitely there to help you guys and also one more thing guys so there is an update about the youtube membership so whoever are joining my membership so what i'll provide them is that they can get all the github codes so if you want to become the members i think it is a great time you can do it please because because after that then you can just click on this join button and you can become my member once you are my members you you will be getting like a few few good things from me for example you will can connect with me for your doubt session or you can also get the github codes from there and that is only for the members okay so i am keeping it as members only if you need those course then you can just join this okay join my membership and yeah i'm always there for help so if you have any doubt you can mention them in the comment section i'm definitely gonna answer each and every questions if you have any all right so in this way we have implemented these things and i don't think so there will be any questions if if it is then i'm always up all right guys okay then take care and keep learning guys

Channel: Let's Program

Views: 21,296

Keywords: angular app, angular project, angular full project, angular 13 project, angular new project, angaulr cryptocurrency, cryptocurrenct app in angular, angular price tracker, angular api project, angular http client, angular currecny project, price tracker, cryptocurrenct angular 13, cryptocurrency app using angular, angular cryptocurrency, angular begineer, angular advance, angular routing, lets program

Id: vb6b67HiuC8

Length: 125min 13sec (7513 seconds)

Published: Wed May 04 2022