Build a Webshop – Angular, Node.js, TypeScript, Stripe

slow button is a senior front-end developer and popular YouTube video creator in this course he's going to teach you how to create a full stack Web Store using angular node.js and stripe if you're looking to build an e-commerce store you're in the right place because I'm going to show you how easy it is to build it in this tutorial I'm going to use angularjs typescript node.js and express.js and we are going to do start payment integration we are going to use angular material component library and we are going to use Tailwind to help us to start not Material component and this tutorial is only for teaching purposes so we are not going to be creating the real products but we are going to use fixer API in order to help us prerequisite for this video is to have no JS installed on your machine if you have angular fundamentals go check my course on YouTube if you're not sure and to create account on stripe.com it's free by the way and that's all that's our coding go with slova okay on my desktop the first thing which I want to open is my terminal so right click and I will open up the git bash here you can open up the terminal Powershell whatever you're using for me it's git bash now the first thing that you want to have is npm installed I assume that you already installed the npm now let's install the angular CLI this will help us to create new angular project and it will help us to create new components Services whatever we need inside of our angular application so in order to install it run npm I for install and angular forward slash CLI and the version is going to be 14.2.1 make sure to install the exactly the same version otherwise you may run into issues during the project development installation has been done let's clear this now we want to create new project it's really easy to install the new project once you have angular CLI installed so run the command NG new and now we need to pass the name of our application I will just name it store and I want to pass a couple of parameters so I want application to create default routing for us because we're going to have two pages then I want to remove the test so add a flag skip tests because you're not going to be dealing with tests in this tutorial and we want to have the application minimal so set the minimal flag like so this will take some time to create the application and install the packages I will be right back and application has been installed successfully the packages installed successfully and successfully initialized a git repository for us okay now we can close this and we can open the visual studio code so for me it's just Visual Studio code you may use some other code editors of your choice so open the folder and I created this folder on the desktop so it was called the store just select the folder I trust authors okay and now we want to open the terminal on the bottom of the vs code we can close the get started so the packages have been already installed as you can see we have the node modules installed and once again if you open up the package.json file make sure that you have the correct version of angular installed as you can see for me the angular core version is 14. so make sure to have the exactly the same version now in order to start we can just run Ng sir and this will start actually I'm running on the Powershell it may come with issues so I need to open up the git Bash and now just go NG serve [Music] this should start our local server it says do I want to share the pseudonymous usage data no I don't want to that has been disabled we just want to develop the application nothing else and once the compilation has been done we can open up the localhost 4200 and see that our app is running so the first thing that I want to do is I want to go to the source app and access our app component so inside of our template let's remove here this boilerplate code like so and put it out router output we can remove that as well this is the place where we are going to be placing our components so what I wanted to do the first thing is I want to add the angular material this is the library that we are going to be using for creating all the components so it's easier to develop and faster if I go to angular material documentation you can see the list on the sidebar you can see the list of all the components that I have in order to use the specific components for example like table you need to go to the API of this component and you can import it import this module inside of your app modules and you can see the examples how to use it you just need to go to view code and you can see and you can play around with it it's really easy to implement and I highly advise you to go to the material documentation website first before you start developing and play around with these components because these are the components that we are going to be using throughout the development now let me add the angular material in order to add it let me first clear the console I I will just run NG add at okay and you add as angular forward slash material [Music] like so would you like to proceed yes and installing all the packages you can save our app component.ts file it asks us what is the theme defaulting that you want to install and I will choose the first one as you can say as you can see here it says Indigo pink it's good enough for me so actually you need to be focused on the terminal to select the indigo set up Global angular material typography Styles yes include and enable animations yes so just click enter you can select the option with uh with the arrow up and the arrow down and just click enter when you want to confirm and with this we have added all the angular material uh files that we need now in order to use them inside of our application we actually need to open up the app modules file in here we need to install all the modulus and import them in order to use them so here inside of the Imports array let's just add all the components that we want to use so I'm going to be using the matte side now let's first import all the modules and later on we can just focus on developing and we don't have to play around with the configuration importing the modules and things like that so when I sign up module the next one is going to be matte grid list module this one is obviously for the grid the setting up is for our layout and basically we're going to have the sign up on the left side with the filters and the categories the next one is mat manual module we're going to have a couple of menus obviously then next one is going to be matte button module okay then math card module most of the elements is going to be placed inside of the card modules card module give you a nice uh Styles around your elements [Music] Mad Card module next one is matte icon module so we will we will have a couple of icons as well obviously and icon module matte X tension expansion module this one is going to be for the expansion expansion filters on the left sidebar next one is matte list module also for the left sidebar then Matt toolbar module this is going to be used in the header because we're going to have a couple of components that that are going to be using uh the toolbar next one is mat table module you're going to have table on the cart page then the next one is Matt badge module this one is for adding the badge uh inside of our cart icon because our cart icon is going to have a badge and displayed how many items is inside of the card so this module is for that that matte snack snack bar module this one is for displaying the information snack bar for displaying information uh to the user so maybe you're adding the item to the to the card or you're removing or maybe you're creating new product whatever you're doing you can notify the user for that and this module is for that and this sums up all the modules that you're going to be using now we just need to import these files because we have imported them inside of the Imports array but they need to be imported into this file so we can use the import on top and let's do this for all these modules so import ant module from angular material this one is from side nav you see the auto completion there and we can just copy paste this couple of times it's going to be easier for us so just copy paste like so and obviously we need to update the URL my menu matte button copies make sure to copy it correctly so we are replacing the same side module here then matte icon module then matte expansion module then Matt list module let me come let me paste a couple more times okay let's remove this dots commas actually then let me copy paste the other ones my toolbar that's table module that badge module and matte snack bar module okay let me remove these commas and now let me update so for the grid list it's going to be from grid list from menu is going to be from menu button is going to be angular material button cart is going to be from cart actually icon angular material icon expansion model from the expansion sign up actually toolbar is going to be from the toolbar table from the table batch from the badge snack bar from the snag bar and the list module from the angular material list module and now we have done a lot of stuff right nobody likes them the setup and the modules import but this once we once we've done this on the beginning we can focus on coding and we don't have to worry about what we have important and what we haven't so but the thing that that you need to know is that we're only importing the components that you need in our application and as you can see there are a bunch of components in the angular material but you're only using the ones and important ones that we're using that application the next thing that I want to import and create in our project is Tailwind Tailwind is utility CSS library and it helps you to that style but the position your elements easier so for the components we are using the angle material but for additional styling in the for faster development we're going to use the Tailwind so in order to to install it you can just go to tailwind and you can play around it's very nice utility library and they have really great documentation so whatever the property that you need to use you can search and find really easily okay so in order to install it uh you just follow up the documentation so as you can see npm install Dash the tail in CSS both CSS and auto prefixer these are all the packages that you need in order to to run the Tailwind so let's run that inside of the root folder run just this npm install once that is done let me clear the console we can initialize detailed in CSS so we need to create a configuration file make sure to copy it and now let's open up the token config file it's here in the root folder Tailwind config.js file the thing which we want to add as you can see here it says configure your template paths so we want to tell the Tailwind what are what are the templates that we want to style right to use so here we're basically targeting The Source folder and all the folders inside of the source folder these are stars that that are targeted in that and we want to Target all the files that I have extension HTML and typescript like so so this is how we are targeting all the templates inside of our application and now we need to import the utility classes in the base classes from the tailwind and we do that inside of the style CSS this is our main style and you can just go to the documentation and basically imp copy paste the code from the from this terminal and you can import it at the very top here [Music] okay and now let's just run our application and see if it runs correctly if you have done everything by the documentation it's going to run without any issues the links to all the commands from the get is going to be in the description box below and also link to the tailwind and angular material is going to be in the in the Box in the description so you can go and play around and learn a little bit about these libraries if you haven't before because they're super awesome and they will help you to develop your applications so now the comp the project has been compiled successfully and it can reload because we have removed everything from our app component file you can see that the project is empty now the first thing that we want to do once that everything has been set up correctly we want to create our first component and that is going to be our header components so what we can do here we can create new folder and the name of the folder is going to be components like so and inside of the components folder create new file and let's name it header or actually even better now let me show you what is the the best tool of the angular CLI if you want to generate a components Services pipes directives whatever you need inside of the angular you can use the CLI so here we are inside of the root folder and we can just navigate to The Source change directory to the source app components folder now let's generate new component you can do that easily by running the command NG generate G for Generate C for component and name of the components let's call it header component actually I'm running the Powershell and that's not going to work so I need to open up the git bash here sorry kid bash like so and I'll again let's change the change directory to Source app components and then NG generate component header like so just wait for a couple of seconds and as you can see you generate the component for us now what we can do here we can use this component copy paste the selector and we can go inside of the app component inside of your template just let me just tell your template just paste [Music] the tag name CSS selector and as you can see if I zoom in you can see that it says header works I can close the tailwind and angle material here now let's start actual developing of this application now we can close our app component file can shrink down our terminal okay inside of the header component if you want to use the external HTML file and not use the one inside of the TS file you can create new a new files so let's just create new file and name it header is removed it criminal case other Dot component.html this is the naming convention that you want to follow the first the name of the component dot component and then the extension right so we have usually header dot component.ts sometimes we have the CSS file so whatever you need and now you can remove this code and we need to include it we can remove the Styles as well and if we want to include the external HTML file that we just created just run type in the template URL property and for the value of the property just inside of the current directory targeting header dot component dot HTML like so and let me close all the other files and let me just open up the HTML file so as you already know this file is on the very top of our application and on this header we want to have the link to the home and we want to have the card so all the time you can see if we have added some components or actually the products to the card so on the very top we are going to use the matte toolbar component so we are start using the angular material component so this component gives you nice uh nice component that styles similar to the card and where you can Target and where you can place your tool tools basically so inside of it let's create first link to the home so like I said it's going to have the router link to the home slash home okay and we can type in code with slova store or you can name it I store or however you want to call it okay and on the right side just save that up and we get this we get this nice as you can see nice gray background here okay okay a couple of things I want to add here so the first thing I want to add the maximum bit to our container so I don't wanna our website to take the full width of every single device right because you can open it up on very large devices so set the max width to 7xl and set the MX to Auto this means that the module F and the right basically horizontal is going to be Auto and it's going to Center our container and let's add some border on the left and the right side or X like so now on the right side we want to add the icon so use the matte icon like I said it's going to be card icon and the name of the icon is shopping underscore cart like so and as you can see we got the icon now in order to style these two I want to actually apply some of these stallion Styles so I want to separate these two and place them on the edges just zoom out a little bit so in order to do that I just need to to run the class justify between like so and they're placed uh you know on the edges of this container in order to apply the justify between you basically need to have the element that has the display Flex Rule and the metal toolbar already has this rule set up now inside of the map icon you want to show the count of the items that are added to the to the icon how we use that how we do that is using the matte patch so add the input property matte badge and let's for now just add something statically let's add one and as you can see we get this item added so it's really easy and really fast as you can see to to style uh and add components using Gengar material if you want to change the color you can just use the matte batch color property badge or the attribute actually and I'm gonna use warn because this is going to add a red color to our batch that's very nice cool and now we want to add the button actually that is going to open the menu once we click on the shopping cart we want to add a menu so this button needs to surround our icon so let me let me move the icon inside of the button and this button is going to be matte icon button so this is the the component for the buttons that hold the icons obviously okay and then we want to add an attribute for the manual matte menu trigger 4. and here you define what are you triggering for so once you click on the button you want to trigger the menu and this is the name of the menu and below this we can add the matte menu okay let me just get back together component here below that add math menu like so and for the 40 for the selector we are using the menu here this needs these two needs to be the same right so this is how you target the menu and add value as matte menu okay now instead of the menu let's set it there and let's have some classes okay so P3 divide y divide solid okay so the first class adds padding on top bottom left right divide y adds the division so basically like a separator in between the rows inside of the this div and we want the separation to be solid so yeah it's gonna we're gonna see once we start adding some dips here let's add the first row the first row is gonna have the class uh also P for padding parting bottom three then Flex and justify justify between like so so basically we're adding some padding on the bottom we are setting this div uh as a display flex and we want to justify the items in between so just to set them on the edges right and inside of this div let's set a span for this band we're basically gonna say how many items do we have inside of our card so let's say three items are actually we are using here one so let's add one one and let's add items like so and let's add some margin on the right side so class 100 right 16. like so and on the right side we want to have the router link the router link to cart this is going to be the page that we're going to create later the card and the home page and the text is viewpark okay let's save that if you open we get to type two items here the one is the the length but basically the count of the items that we have inside of our card and the view card and let's make the items capital i like so then add another div inside of this div you're going to have all the items and once we start fetching the items we're gonna Loop uh we're gonna Loop and display everything that we fetch from the array of the items or the products but for now it's just gonna be static uh components let's add a deal with the class Flex again justify between and font light margin button too so again we are setting the div to the flex we want to separate the items on the edges of the container set the font to be light so to be very light and the margin that's a margin on the bar margin margin bottom two so inside of this div let's add item name like keyboard and the quantity is like one and then on the right side we want to add the price of it so let's add a class font bold not italic actually they shouldn't be italic as it's spam not an eye and let's add a price we can put that inside of the angular expression y we will see right now so if we add like 150 dollars only it's very expensive for a keyboard just add a pipe currency like so now if we save it we'll see that it will add here it adds here uh basically the the dollar sign the default currency is dollar but with the parameters here you can add a different occurrences I believe the dollar one as default that's not a problem for me uh the one thing that I want to add is I want to add some some padding here so inside of inside of this there actually we want to have a container here and let's put inside of this container all the products that we have so add a p y three so this means basically I had a padding on top and the bottom like so so there's some separation now when we start looping we can just start adding these these items like so and it will just add them below as you can see here and on the bottom let's add another div here we're gonna show the total summary so air attacks total and add another span here at a class on Bold and add like a total again we can use the currency pipe and let's say 450 [Music] and let's use the currency pipe like so let's save that and I just want to add some separation so let's add here the class again let's add a flex justify between I had some padding on top and the bottom and let's use Font light as well like so okay now we have all these things and on the very bottom so underneath this total div I want to add two icons so the first one is going to be to remove everything from the card so to clear the card and the second one is going to be to go to the checkout right so add a div and let's add a class again potting padding top uh three you can start it is flex and justify between like so and inside of this add two buttons so this these are going to be the buttons so these are going to be the buttons that are going to hold the icons so add a class BG rows for the first one 600 this is going to add the red color to our to our button text White around it cool this is going to make a circle out of our button set the width to B9 and a height to be 9. okay and inside of our button let's add our icon icon and the first one is going to be remove underscore shopping underscore cards okay and if we say we get this remove card and and as you can see we added this background rows 600 this is the the different color and if you want to change the color so basically you just choose the the color that you want to add and with these numbers you're adding the shade so if I go and type in for example 300 let me show you so it will basically show that the lighter version of of the roads and if you go like 900 it will show you the darker version I like the 600 so I will leave it as it is here and let's copy paste this one we want to add another icon and this icon is actually gonna have it's going to be just a link so router link and let's it's gonna link to the record and the background is going to be green instead of rose everything else Remains the Same and yeah rounded tool means basically that we are added border radius so if you remove the border around is full let me show you [Music] it shows a square so that's why I'm adding router full and this is basically the width and the height of the button with W and H and with that we can complete it our menu and basically our header so now we can start actually developing our home page our landing page and in order to do that let's open up our source tree and inside of the app let's create a new folder and name it page Pages actually inside of the pages we're going to use the angular CLI here again CD into let me actually see where we are at any components CD on the topper directory and let's change directory to the pages okay and here we want to create new component NG generate component now let's call it home component it will take for a couple of seconds and as you can see it creates the component home components inside of the home folder and it updates the app module so if you go to the app module as you can see here we got the home component imported inside of this file and it has been imported into the Declarations array so in order to use the component if you haven't been using the Standalone component you need to import them inside of the module in order to use it now inside of the app routing module we want to add the first route so the name of this route is going to be home and the component that is going to be loading this is going to be the component that we just created so its name is home component like so and also what we want to do is we want to add this path as default so how we do that is we'd add another object and inside of this object we add a path to empty and we add redirect to home and add path match too full and make that as a string so what this does is basically if you enter the M3 empty string so if you just go to localhost it will redirect to the home and then the component will home component will load this this is how it works so in order to load these routes we actually need to go to the app components folder and here we need to add the router Outlet like so and we need to close that tag like so and now we have the app component loading our com component actually so depending on the on the route it loads the correct component and as you can see if you just type in localhost 4000 actually four thousand let me remove it the extension the protocol actually and we get the Home Route added to it and we get the homeworks so now we can close the app routing module we can close the app component we can close the header component and we can start developing our common component so let's open up the home component Pages home like so and once again let's remove this template as you will going to be creating the new folder new file template URL external HTML file so the name is going to be inside of the current folderhome.com component .html and we can copy this and just add new file here or you can use this option like so and save this okay now we can shrink down our terminal and let's start developing later HTML code so here we're going to use the matte drawer drawer container this is the component from angular material and what it does it basically creates a drawer or a sidebar which which it can pop up or stay always the open which is the case in this uh in this application so add a property Auto size to True which means that basically it's gonna true which means that it's going to recall recalculate what are the values and the width of the container elements and if there's something loading dynamically it's gonna Auto size it again let's add also we want to add a couple of more classes here so let's add a class uh let's set the mid height to be full so to take the full height of the window let's add a Max maximum width as we did on the same on the here on the toolbar maximum width to be 7xl now let's add MX photo so basically this means margin on the left and the right side horizontally to be Auto so it basically centers your container now let's add border on the left and on the right side like so okay so if we zoom out you can see that we have this container and we have borders on the left on the right side let me zoom in again okay and inside of this matte draw container we'll have one drawer which is basically like like I said uh the sidebar match drawer and the mode here is going to be side these modes can change the way how this drawer works yeah you can you can set it to overflow of the content but if it's set to side it means that it pushes the main content so it's not overflowing any any layout and we want to set it always to be opened open like so and let's just add uh some give here that says filters it's going to do it's going to be the categories but it says filters as you can see it's always open here so you cannot close it because we added this property and let's add some padding to this pairing six like so that's good [Music] okay now on the right side of this matte drawer container we're gonna have matte drawer content so this is going to take the biggest portion of our page my drawer content and I want to add some padding there as well so add padding six like so and here we're gonna create new a new component uh which is going to be called app products header so inside of our pages folder add new folder and name it components so this folder is going to hold all the components that are inside of the home page right so the components inside of the app folder are components that are that are being shared across the entire application inside of the pages we have the home and actually we need to place this component inside of the home page like so move it and now inside of this component let's create new components now let me see where we are at in our in our tree in the pages now it's CDs change directory inside of the components let me just see okay we need to change directory to home to components and now let's uh NG generate component now let's call it well what we said products products header this component is gonna have some elements that are going to help our us to sort and to display products differently okay and inside of let me just open this component and again let's create new file here like so and let's call it products Dash header dot com on end dot HTML now let's include that okay here instead of inside of the template just add that and let's change the property to the URL like so and let's remove the Styles here okay [Music] now we need to use this selector CSS selector and inside of the home component inside of the matte drawer content we'll just include just include that here like so and we can close the other components and we can just focus on the coding this part and on this component on the left side we will have a button that will change the Sorting ascending or descending and on the right side we'll have one button which will change the number of products that you display on the page and the third element is just to change the layout of these product items so let's begin we will place that inside of the Mad Card element and let's add some margin on the bottom so margin bottom four added another div and let's set a class of flex and justify between so again on this div we are setting this div to have the display as flags and they're justifying elements between them so it means that the one on the left side we're gonna have one button and on the other side we'll have two menus but they will be separated totally and they will be on the edges of this container okay now create another div and inside of this div let's create a button [Music] for that menu this button we will have matte matte button argument or property which will transform the regular button into the matte button so and it will have text sort by and let's add a dummy description let's say now we want to create a menu for this button so if I save this you can see that we created this button but let's create a menu so once we click on the sort we should get a menu and we can change the the ascending sorting by descending or ascending and we do that by passing the mat menu trigger four this is the property and we need to pass the name of the manual and the name is going to be sort by menu below this button let's create the menu and the menu is going to have matte menu tag and now let's give this name that we are using to Target this menu and we need to pass the math menu so by the sort by menu basically we are creating an ID we are adding the ID to this to this menu and that's how we target it and connect this matte menu with this button okay and now if you save that we should get an empty menu like so and in this menu which we should create two buttons which will change the Sorting the first one is going to be descending and the second one is going to be ascending and also let's add matte menu item property to both of these like so and now what we can do is we can create a sort variable which we can update so let me just check the HTML if it run this correctly it does as you can see and what we can do here is we can just create a variable and name it as a sort and give it a default value to sort and we can change this desk to the variable like so and then we can create a new method which will update this okay it probably does doesn't exist on the prop products so because it's sorts and task this is the name of the property sort by and sort needs to have the descending the default value not sort okay and we can create a create new function or actually method on sort updated this method is going to return the void so it's not going to return anything it's just going to update this variable here so it needs to accept new sort parameter to this type of string and all it does is it updates the sort on this one on this class to new new source equals new source like so later on we will emit this value and we will fetch the results but for now this this is just the regular functionality okay and now we need to call that method one click so here on click call the on sort updated method and for the first one send the description so in that description descending it's a little bit confusing and for the second one send the ascending like so and if I save this when we select you should change the value and later like I said we will go and basically emit the new value and we'll fetch the data according to this value so we will just sort it differently okay and with that we have completed the the left sorting manual let's proceed with the second part okay so on the right side let's create another div [Music] and let's set a class Flex again and items Center this means that we want to align the items horizontally not actually vertically so they need to be in in line with this sort by description everything needs to be in line okay so let's add another div and here we again uh want to create another menu so let's add a button again and this button is also going to be matte button and again let's add matte menu trigger matte menu trigger for property or and if you receive the menu it will actually be targeted and connected with the menu this is the ID that I was using so math manual and let's add the ID of menu and it's math menu I mean this could be more descriptive but on this component we only have these two menus so it should be it should be good enough okay and then here I want to add a text dream show and here we will basically uh show the number of items so let's add a new variable and uh let's call it call it items show count okay and let's create that new variable here items show count and let's set the default value to 12 I think yeah let's use 12. okay [Music] and if I save it here it showed well so basically showed 12 items that that's what it means okay and what I want to add besides that is I want to add an icon and the name of the icon is expand more so that indicates that actually we want to we can open this one right and that's exactly something that we missed for the first menu so something that should indicate is sorting as well that if you want to have the expand here yeah that's more like it okay let me close it and now inside of this menu we'll we'll show different values similar like we did for the 41st menu and actually I can just copy paste this code so it's easier so from the first menu let's just copy the buttons because here we will also have the buttons and just for the first item let's set the value to 20 to 12. and let's create a new method once this one was called on sort updated and the new one is going to be called on items updated okay this one also doesn't return anything it just updates divide the value here so it will receive the count which is a number [Music] and it will update this dot items show count to equals to count okay and we can use this method now to update this to this value so instead of on sort we will call on items updated and here we will pass value of 12. okay [Music] here but let's add a couple more more items so the second one is going to be 24. 24 and the last one is going to be 36. so if you have any other preferences on how many items would you like to show on the page you can add them here let's save that up and if we try we can see that this updates the values like expected so right now this is static it doesn't change any data because we don't have any data yet but later it will update the number of items that we have on the page okay and the next thing which we want to add we want to add additional div and additional buttons where we can change the layout okay so we can close this div and let's add another button and this button is going to hold the matte icon and this icon it's going to be called a view list like so here and let's copy paste this two times the second one is going to be view module [Music] and the last one is going to be called View County [Music] and we get these three icons and right now they are static right but later on they will you know update our layout so what we can create the method which that we will use to to update our layout so let's create that on columns columns updated it perceives The Columns number which is a number and this doesn't return anything so return type is void here uh then we want to emit this value so we actually need to First create event emitter so let's add output and make sure to import the output from the angular core this is the way how you send the data outside of your component to parent components so create output and let's name it column columns count change like so and this will be new event emitter coming and make sure to import it as well from angular core okay and it will send a number so this is the number of columns you want to display in a row okay and what we can do here is basically just call this dot columns count change and just emit [Music] the number that we receive from the template like so now let's call this method inside of our HTML file here on click so here we have view list on the first one we want to show only one item per row okay on the second one I want to show three items per row and on the last one I want to show four items per row oops here make sure to put them inside of the parentheses and now we can catch that value inside of our parent component which is the header component so here inside of the app products header we have new events and that event is called uh let me just check what is the exact name columns count change okay and this is the event columns count change and when we call that event you can call new method on columns columns count change but we need to create this this method inside of our home component here and we will we will need to create a new variable which we will update and use inside of the inside of our layout you can set you can actually remove these styles we don't need the Stars here and let's create a let's create a new variable so the new variable is going to hold the number of items that we have per row so the columns that we have parole is three that is the default right that's right and what we want to do is basically to update this so This dot count these dot calls actually calls is equal to and we need to receive the cost number calls number which is a number and this method doesn't return anything so again it's void and these calls basically receives these this new number right and yeah I think that should that should so let's just try if this works we can go and open up the home component and inside of the global content you can just place the variable here and as you can see the default value is three let's see if you click on this one it should show one and if you click on this one it should show three actually Four yeah and on the middle one you should show three like so this works as expected so we can continue now and build our actually we can first build our categories or the filters on the left side okay so let's create another component and let me open up the terminal again here so inside of the components folder app pages home components folder let's create new one NG generate component and let's call it filters like so it will take a couple of seconds okay so it created a new component and it updated Source app app module so once again let me show you it adds new components inside of the app module so I don't have to do this manually so this is the beauty of the angular CLI and inside of the components open up the filters so this is the new component that we just created and again let's remove the styles and let's add external template URL template URL and we will create here new HTML file let's call it filters Dot component.html so let me copy this name and here in filters create new file with the same with the same name that we just placed inside of the component decorator okay let's first create Gories categories array so this component will hold the list of the categories that we can use to filter our our products on our website so let's create some dummy categories later on we will fetch this from the API so let's say shoes maybe Sports I don't know something that will you just need something to use into iterate through inside of our HTML file okay let me close the other files so we are not confused and then we will use another material component and it will be called matte expansion panel you'll remember this one so this component basically uh it's like a expansion penalty set so you will just see the name of the title of this panel and once you click on it you will expand and show you all the items inside of it so this uh let's show this panel only if we have the categories so NG if categories like so so if the categories do exist and they are not undefined show this otherwise just hide this panel inside of the matte expansion panel let's add matte expression expansion panel header let's remove this closing tag and let's add a new one inside of the header you just want to add a title which is matte panel title and it will be called categories like so okay let me remove caps lock and we'll have another matte selection list okay this is another matte tag selection always and it basically shows the the elements in the list so and it will it allows you to select one of the elements from the list and we want to be able only to select one item so that's why we need to pass the multiple multiple uh input false attribute so if you click on true here for the multiple we can select select multiple items inside of this math selection list okay and here we have Matt list options like so and we want to Loop through the categories array that we just created so create ng4 and call that category of categories okay and set the value to be a category like so and inside of the this option we want to display a button [Music] and just place the category here like so if we save it actually there's one problem with this because we haven't included this component inside of our inside of our sidebar so that's the problem now take the selector and go inside of the home component HTML file and instead of these filters you need to place this component okay now we will see it okay there you go and if you click on the categories it expands and you get the shoes and the sports okay now we want to emit this value so once you click on like on the shoes on the sports as you can see you only select one of the items and we will have more items here more categories but once you select on the item we want to emit this value to the parent component and we can use the data to fetch the categories right so let's do that inside of the template here you can create new method yeah let's call it on show category on show category this one will return nothing so the term void and it will receive the category which is just a string and this string needs to emit this value so let's create new one and let me import the output from angular core like so and let's name it show category okay which is a new event emitter the event diameter okay and this one will receive the string actually with emit the string let me close the folder so you can see it it will emit the string and let's import even emitter from angular core as well and now when we call this method and then we pass the category we can emit this value so let's call this dot show category dot emit and pass category okay and let's call this method inside of our HTML component here inside of our button let's call click on click event call our method and pass the category [Music] okay now we can test this again uh the event name is the show category so here inside of our home component we can call this method show category and we can create new method that method can be called on show category and just pass the value I usually pass the value from the from the child events as event this is the parameter okay and inside of the TS class let's add this method this method again is not returning anything so it returns void and it needs to have one parameter which is the category and let's call it new category cut category like so and it will be the string value now uh we need to add the new property so let's call it category and let it be value string and undefined so it can be when you don't Define it initially it needs to take uh either of these two values so if you initialize it right away it can be just string but if you leave it undefined you need to add these values that are undefined okay so here we call this dot category and we assigned it new category value and we can just use this value to test it inside of our home component the same area how we are testing the columns Let's test category and once we click on one of these elements we should see these values inside of our component choose Sports it works as expected now the next thing which I want to create on the home page it's I want to display the product boxes here and it should and that should do it after that we should fetch the actual data and display it so let's just to sum up what we created here we created this card uh menu and actually I see that we are using the two SIM icons so that needs to be fixed uh this one is for removal of the cards and this one is actually for proceeding to the checkout so open the products header and any side of the products header no actually it's not inside of the product Setter it's actually in the header component so inside of the components folder Source app headers we have here components we have here the icons and one is remove shopping cart and the other one is also remove shopping cart so it needs to be just a shopping cart Let's test it yeah so this one should uh route us to the cart as you can see here and not to to remove the shopping cart yeah okay so we fixed that back so just to sum up we created this header with this uh Home Route link we created this card which shows the items we can go on a new the card you can remove everything from the car and you can proceed to the checkout and actually this is all static we just need to be implemented we added this sort menu we added this show a number of items menu we added this layout buttons and we added the categories on the left side now like I said just add the products on the middle and let's proceed to the next page and now in the home component HTML file let's remove this category variable and we'll add a wrapper to your product box component so I'm gonna use matte grid list component and this component basically is a grid so you just pass a tile child component and it separates them into columns and rows that's all it does so we want to set the gutter size which is actually the margin in between these elements so cutter size to 16. so it's 16 pixels for number of columns we want to change this dynamically depending on the buttons that we click here on the first one we want to have the column number one per Row in the in the middle three per row and the right one four per row but as we created this this variable dynamically already so we'll just passed the columns this variable and for the row height we also want to have this dynamically updated so let's create new variable named row height and let me go to the home TS file and here we have columns that error being three at the moment but we are updating the columns here so for the row height let's just create a new object that we can use to map the heights so create a constant named Ros core height and this will be an object and this object will have three values so the first value is obviously when you have one one column selected or one item Purl and it will have a height of 400 right then the second value is when we have three items per row and this one we will have height of 335 and the last one is when we have four items per row it will have hypo 350. let's decide the type so the type is in object basically and the object has an ID number this is a key and it has value as number okay just set up the view wrap word wrap so that you can see okay [Music] now what we want to do is we want to set the row height depending on these columns here so we can use this constant foreign called this dot calls and as default one is three so we will have three columns as default the default height is going to be 335 but once we update the on column count change we want to update this value as well so we will basically call this assignment again and make sure to use this to refer to this variable here so this way we are getting updated narrow height dynamically as well here okay any side of our matte grid list we want to add another math component which is a child of math grid list and that is matte grid tile okay and we will use this one to Loop through the products array once we fetch them and now we want to create new components so let me open up the terminal here and change directory inside of the source app Pages home pages and components and inside of this uh folder let's create NG generate component and the name of the component Let It Be product box so this one will hold all the informations for the products in image a title description all these things that we want to display about about the products so as you can see it created a new product box component and and it updated app.module.ts file okay let me close that down and we can go into components folder and open up the products product box folder here what I want to do same as with the other components let me just remove this boilerplate and we want to create new components uh HTML file so product Dash box that component dot HTML okay and let's include this external HTML file so template URL is name of the property and make sure to refer to the current directory like so okay and we can close that now we can include this component so make sure to use the selector and include the selector inside of the home component in the math grid tile okay here you can close the home component and we can open up the product HTML file and let's close the other so that they are not confusing us okay so here again we're gonna have let me just enlarge the browser and you will have MAT card as the wrapper again obviously let's add some class so we want to add text Center [Music] to the math card because I want everything to be centered the title of the description and all this information okay so let's add another div and inside of this div let's add an image okay this image is going to have a class MB -1 which means margin bottom one and MX Auto which basically adds an auto margin on the left and the right side and Center is the image okay for the source okay and for the source you can use placeholder images there's a great website for it and just type in the source like so https colon forward slash forward slash via DOT placeholder.com forward slash and this is the actual size of the image that you want to put in I just put it like 150 but you can put whatever size do you want you know so and you basically get like a square well and you get the values of the image inside of it it's very useful if you want just have the placeholders while you're developing something okay and let's add height to be 200 pixels okay and this is how to add a custom height to your properties H stands for height and this way inside of the brackets you can add a custom value this is predefined value and this is the custom value custom value okay let's save that and this changes uh the image size okay now next to the image let's add another div and inside of this tip we're gonna add information about the product itself so let's add a class and set the width to full so this basically sets the width to 200 percent okay and inside of this uh do let's add another div in here let's add category of this product so let's name it shoot maybe okay then let's add a paragraph below that okay now let's add a class truncate okay and hover white space Dash normal okay what this does is basically if you have a text that is longer than this box it cuts off the text and adds Three Dots and when you hover over that text it shows you entire text Justin hover it's very useful when you have long titles you know so that's a title here like sneakers Maybe okay let me just change the view to Beaver wrap like so and that looks nice and now let's add another div here actually description so let's add a paragraph here and for the description Let's uh just add dummy text description and we will update that later on okay uh actually I see the text is not centered and that's why that the reason for that is because we miss here that the text the T on the end okay that's more like it and now below this div okay we want to add another div and let's set a class flex and justify [Music] so here at the bottom I want to display the price and I want to display here uh proceed to the checkout basically uh I'll actually to add to the cart so cart icon so that we can add this item to the card yeah so get a span here and let's add we use the class text Red 400. and let's use the currency pipe again to display the value of the older price let's use 150 and just use the pipe currency like so and it displays the currency in correct format and on the right side I want to add a button and inside of this button let's add a matte icon but icon okay like so and let's add icon as shopping underscore card okay and let's just change the color of this uh of this icon class and set it to text Dash Gray Dash 500. okay that's much more subtle okay I think this looks very nice so the one thing that I want to change here is basically depending on your body's the layout select that we want to change uh this layout on our product box a little bit so when we are in full screen mode basically when we only have one column like in this case one column per row we want to show the image on the left side and we want to change the description the title in all this information on the right side here so that it takes more more space actually right and the image is bigger so how we can do that is we can create an input here which we will receive from the parent component and let's call that here so import input from angular core make sure to import it on top here initialize it and add a name full width mode and let's add a default value files false because when we load our application we will have three product product boxes per row so it's not going to be in the full width mode but only if somebody clicks on this first icon it's going to be one product box per row and then we are in full width mode okay and now we can use uh this property to alter the sum of the stars that we have okay and actually before we do that let's go to the home component and we can set this property on the product box so it's in full with mode only if columns is equal to one okay okay close that so if you go now and click like so you can see that actually this column is taking the entire place right uh but it's not taking the full width so let me go back to the home component and set here the width inside the class with full so it needs to take the full width of this entire container like so but the layout is different so we want to change that okay okay so here the first thing that I want to do is I want to Center the text only if we are not in the full uh full width mode so here we can use mg class to create this conditional right and here I will add an object basically an object and inside of the object add text Center class only if you are not in full bit mode like so and I will copy this so because we are going to use this quite some time and also I want to change the height of this image so where is our image it's here so let's add again NG class and let's add basically add a add an object and let's add a height of 200. 200 pixels only if we are not in the full height so basically if we are in default mode otherwise increase the height to use the 365 360 pixels that's really okay like so and make sure to wrap that in the quotes here as well because this is the index of the object and 360 if it's in full width mode and I want to yeah put the quotes like so so let's try this okay now switch to the full width mode and you can see that the text is centered actually on the left side actually it's not centered it's a line on the left side and the image size it's bigger and if you we switch back to the default layout it's going back okay the the different layout we want to achieve and still but we want to move the image on the left side and this description on the right side so how we can do that is we want to add for this div we want to add property Flex so let's add again NG class and let's add Flex if it's in full width mode okay like soy and you can see now it's in the full width mode basically on the left side we have this and description on the right side but we still need some some more styling because it doesn't look that great either so we can go and add some padding and the other properties so here let's add NG class okay and let's add some pot padding left in the on the right side and let's add a flex and flex direction to column and justify between okay okay like so let me just make sure to to apply this rule if you are in full width mode and make sure to surround these classes read the quotes and that you're spelling is correctly so what you're doing here here is we're setting this div to the flex mode or basically display flex and the flex direction is two columns it's not it's not for rows and we are just basically justifying in between if we save it and test it okay that looks much better he has some space around it much much better and I think basically we're done except the fact that I want to display uh this description only if we are in public mode so go to NG if this is going to be easy only it in in full width mode so when we are on default we don't show the description and when we switch on it on the full width mode we show the description yeah okay and that's all I wanted to do now let's test the layout and how it looks if we go to the home page and let's copy paste it this metric tile a couple of times I'm going to just copy it like so okay let me just copy it I'll lose focus for like five or six times like so and let's see what we got okay so as you can see this is the default layout where we have three items per row and if you click on the first one on this layout we get one item per row and we can click on the third one we get the four items per row and this looks uh and it looks and works as expected with this we basically have completed the home page so we created everything uh which which is static here but the only thing that I want to do here now is I want to implement the API apart from this page you will have a card page and actually we can first go and create card page because maybe we should start first with implementing all the static files first and then we can dig in into developing uh and integrating the API into it so let's do that first let's create another page okay so let me close all these files and let me open the terminal let me see where we are at in the directory and let's change directory to the pages so City a couple of times and now we're in the pages director here we want to create new card components or actually a new page component so run the command NG generate component and call it cart okay it will take a couple of seconds to generate it like so and once again we can close everything and we have this card component so what we want to do here is we want to set the routes you want to set new route in order to load this page so let's just copy paste this first route and change the path to be car the component that is going to load this is going to be cart component make sure that the car component is imported at the very top here okay and close that we can close the terminal as well and now let's open up the cart component and let's test it out this route so if we click on and now navigate to to the card you get this card Works which is actual html text here right so once again remove the Styles and let's give an external HTML file okay so template URL and make sure to navigate to the current directory and we'll call it cart dot component dot HTML okay and let's create that file like so okay well on this component we're gonna create uh basically material table and we're going to display all the information before the user goes and buys the product so we need to create at the moment we don't have the real data and we don't have the functionality working for the cart itself so we need to create a dummy card object and let's do that so we will have a card which which is going to be the card a card of type and we don't have this type yet but it will receive the items already so let's create new folder inside of the application and let's call it models make sure that is inside of the app component not inside of the pages and here we can create new file for the card so basically in this folder we will create definition for our interfaces and create new file and name it card.model.ts okay and the first thing that I want to create is export interface just shrink this down enter interface card item okay and this card item is going to have a couple of properties so product is going to beat up string name is going to be type shrinkle as well price is going to be type of number quantity is going to be type of number and the ID of the card item is going to be number as well so here we are making the definition of our data that we're going to receive and pass through the application and we're gonna export interface cart this is the one that we just used in our card component and this one is going to have the items array so it it's basically array of card item that we just created here okay and with this we have created definition uh for a card okay so we can import that here add import from Source app models car dot model OKAY like so you can save it and now let's actually create uh some dummy object you can just copy you can copy the object definition from here so it's easier for the product let's just say choose or actually uh the product is going to take the image of the product so let's just copy the placeholder that we used before here okay the name is going to be sneakers price 150 I'm making this up so party one okay make sure that you format the subject correctly and for the idea let's add the ID to one as well okay like so so we have Now default object okay and what I want to do next is we want to add a property that we will use inside of our our table so that property is called data source and this property is going to receive the card item array you know like so and make sure to Define it as a rate okay and let's assign it to empty array at the beginning right and we can assign in inside of the NG on and it repeats the data source is equal to this Dot card dot items okay but once we hook up the API we'll fetch the data and then we will feed this data source from there okay the last thing that I want to add here is I want to add the columns so displayed columns call displayed columns okay and this is going to be type string array well like so and let's just create this this array okay so these are the columns that we are going to show in the table so we will show the product name second one I mean I could copy paste but yeah this will work as well price uh the next one is quantity okay the currently the next one is going to be total this is the total amount that the user needs to pay and the action uh column in this column we're going to display a couple of buttons so if if user wants to remove the product from the table from the cart actually okay let's save this and let's open up the cart so now we can start creating our table again you already know we're going to use math card for a wrapper and uh we will only display this ngf the card.items.land is existing so basically only if we have uh you know the length of the of the card items otherwise we want to show a message to the user so let's copy paste this that user needs to buy something in order to get uh display to this product right so what we can create here and you can add a paragraph that says your card is empty and let's add a button where you can navigate back to the home start shopping and let's set it matte raised button so basically we are assigning raise button so uh quest to it and router link so that they can navigate to the Home where they can see uh the products so let's change the layout to wordbrap so you can see everything and if I save this for now as you can see the card items length is empty and basically it's not actually uh it's it shows both of these uh cards because we use where the card item length exists we want to show this only if there is no card item land and about how we can test it is basically we can just remove this this first item that we have in inside of the this array and we should get yeah we should get this and we get redirected here how we can get back is we should click on view card because we assigned the card route here okay let's give back this product to the items array and we should see our card which is empty because we haven't created anything yet there so let's start creating our table okay so let me shrink this and here on top let's create table let's add a probably math table like so and data source here we will pass the data source that we created like so and let's add some classes so let's add a class Matt elevation elevation a lab C8 this is going to add you need to make sure that you spell correctly otherwise it's not going to be applied in the application now this is going to add some Shadow on below the table Yeah and set the width to full also I want to add a container to our matte card so I can add class actually the maximum width of our container so add a maximum width to 7 Excel this is the same as we did on the home page and let's Center it so use the MX Auto and this is something which we can use for the bottom red card as well here so if we go and check out here if you enlarge actually you cannot see it because it's big but here you can see when it's on 100 basically it's not taking the full width of the window it has the maximum width okay like so okay and now it's on inside of the table let's add the First Column or actually we can first add the rows so we'll have actually three type of rows first one is the header the second one is the regular row and then and the last one is the footer so table row here and the first one is going to be format header row like I said this is for the 40 table headers and it also needs to have that head row definition so Matt another row definition and this one is going to be the display columns that we created here okay I have a typo called like so columns here and make sure to add the to Matt had the row definition here okay let's create another one so the next one is going to be for the regular table row so Matt row and again we we need to have Matt row definition and here we're gonna Loop to the items so what we're going to do is we Define let row and basically columns are going to get information from these paid accounts here okay and the last one is table footer so again Matt footer row and we also want to give it a definition matte footer row definition is equal to these plate columns [Music] so these are the placeholders in which we are going to render our uh table data right so table cells actually so this is what you want to create first and now you can go and create these columns so let's create NG container like so and the first one is going to be product so matte column definitely it stands for definition it's going to give you a product this is the the key that you're accessing the data source so it needs to match with these columns basically from the items itself so if you want to display a particular property from the object you would use this math column definition here now you can access that so let's add a table header for this one and let's add a definition to it so matte together so this is important in order to add all the functionalities that Matt's table has so you when you add this this property to it it can add additional like sorting or filtering all these things that material table has so that's why you're writing it and you want to test match together cell definition okay and for the title we're gonna say this is going to be product and now let's create a table at the actual table cell and for the table cell you need to pass the math cell and again Matt cell definition and we will go we will Define what is the name of the element and we'll just call it elements and this is how we access the property from the object with with this variable that we Define in the math cell definition okay so we can we can open the image image attribute image of our element sorry and the source is going to be element dot product so this is the product property here so we will access this one this URL element of product okay and make sure to surround that with the curly braces so that you are inside of the angular expression let's add an alt as product and let's add some classes class make it width to be 100 pixels okay let's close that bracket and let's add some margin on the top and the bottom to five pixels okay [Music] and let's create a footer photocell so 3D let's add again matte footer cell okay let's add a definition for this footer mat footer cell definition and you can only this amp you don't have to assign anything to it so in the footer we want to display a button here which will say continue shopping basically Matt is going to be the same but we can just copy paste it from this one but we will update the text to continue shopping instead of start shopping okay continue shopping like so let's save this and see what we got okay uh we don't get anything displayed in our table let me just check the console okay I have some error so let's debug it together and the reason why we are getting this error is because as you can see here we Define these paid columns and we are defining name so it reports the name error because the product has been found here if you have the medical on the finishing product right but we are missing the name so if we go and remove these products here these columns and just comment them out we should get the first column right for two to make the table work as we as we expected but as you can see the first column has uh the table header here product it has the table cell with the image here and at the bottom in the footer it has a button that says continue shopping like so so let's uncomment these others and let's add them okay now let's just copy paste this container and for the second one the definition of the column is name the title of this one is going to be name obviously instead of the image we want to just display the elements dot name okay and what we can do here we can just copy paste this one a couple of more times actually uh yeah for the bottom I don't want to display the continue button again so let me remove this button so for the footer cell this is going to be an empty right and uh for the for this one as well I want to apply some style because some names of of uh particular products could be very large very long actually so let's apply uh one class so that we can actually truncate the width of the of the title so let's add phone k and the maximum width is excess so we are setting here the maximum width of this element and if it's longer than this maximum width it will just cut it off and show the dots that's what I wanted to to display now I can copy this and paste it so the next one that we need uh is price okay so the title the column definition is price the title is price as well and here instead of the paragraph I mean we can use the paragraph but let's just add the property price and let's use the currents but as well or we can even remove the paragraph because we don't we don't need to apply any Styles whatsoever okay and let's copy it again the next one is quantity let me copy that so the math column definition is quantity the title is also quantity with upper first case and the property is quantity but we want to remove this currency pipe here okay let me copy this one and paste it the next one is total okay so the marathon definition is total the title is total as well and here as well for the toll we just want to add element dot total like so and on the footer you actually want to display because we will have on each row the total amount how all the prices and on the very bottom we want to display the the total grand total amount so let's just add a here let's just add new span here let's add some class font Dash ball so make it bold add some padding five and let's now let's set the display to block in order to apply this padding and so we need to set this block and we'll create new method get total and we'll pass the card dot items and again we will use the currency pipe make sure to wrap that inside of the angular bracket so it's in inside of the expression okay and let's define this get total method inside of our card component so here so this method is going to return [Music] number and it receives in items which are type of card item array okay and what we want to do is we want to go and map items dot map and here we can access the item and what we want to do you want to take the item price and multiply that with item dot quantity so here what we are doing basically is we are going uh looping through the items and we're taking the item price and the quantity that it has and then we want to add all of that so we can use reduce and instead of we reduce we always have the previous value and the current value so and all we are doing here is basically taking the previous value and adding the current value on and we need to set the initial value here which will be the zero okay and it shows the error here because we are not returning the number you so we will need to add return in order to satisfy satisfy this rule okay like so and now we created this method let me just indent it a little bit so let's start in the same line okay and so using this method we are getting the total price total price for Insider uh card basically not not just per product and row but for the entire you know entire card yes okay let me see that was the total and last one is the action [Music] okay so let's actually copy paste previous column and let's copy paste the definition so it's action and for the title we don't want to say we don't want to add the title actually but we want to add a button here so let's add a button and we will use this button to clear to clear entire card clear all so to style it let's add a matte raised button so this transforms the director button into matte matte button and let's add a color worn so that it's actually red color worn and let's add a class float right okay so let's save that let's save this one foreign and we get our table as you can see here what I wanted to add a part from the buttons on top I want to add buttons Pro as well here so let me just find that so here instead of the element the total okay I can remove that and here on the bottom I can remove the total as well here and here we want to add an icon so basically inside of the button and let's add a class off Matt Mini Fab okay this will give us like a small button with the rounded style styling okay and let's add a color worn so it's red and let's set a class float right like so and the name of the icon is closed okay so we get actually yes the name of the icon but we need to import the matte icon element and just name it as close and we get this button nice and styled okay and if we go and just let let me try and copy paste this product once again like so and change the like the ID to two for example we will get two items per row and we can remove you know each and one of them okay one thing I'm noticing here actually is that we are missing the total values here so these need to be total values per row so if you have quantity like two or three or five and this is the total value that you're getting so if we go go to them to the total column actually can see that we are using element total and that's something that we don't have so what we want to do here is element dot quantity like here times element dot price and let's format that in the currency pipe as well okay and let's wrap it to the apprentices like so and now let's test it and as you can see we get the values and what if we go and change the quantity let's say for the second product we have three items this one and we get 450 the personality is 150 quantity is three and now the total price is getting updated but ideally uh to increase the quantity we want to do that here so let's add a couple buttons so that user is able to update the quantity if you want so let's wrap the spam with the quantity and let's add a couple buttons here so let's set a button for removal of the for reducing the quantity and let's style it with matte icon button like so now let's add matte icon inside of it and the name will be removed okay like so so that user can remove and let's add another one afterwards and let's call this one add and actually this is the actual name of the it's not that we are calling it like that so is the actual name of the button okay and you can see that this sneakers is not actually online with all of this element and the reason for that is that we are using the paragraph So and it adds some margin on the bottom what we can do is we can change this into span here and and it gets aligned and make sure to add actually we can we can test this so let's see if it works or not so let's add some gibberish long text and see if it gets cut off as you can see it doesn't work the reason for that is we need to set the property block to it and now it works because the span by default is not a block element so okay it doesn't work okay let's just remove this rubbish tag and let's add the element name and don't forget to add the block display block property okay the last thing that I forgot to add here I think this looks nice the only thing that is missing is we want the actual button to go and to you know do the actual shopping right so to proceed to the checkout so let's find the actions here actions column and for the footer let's add the button for that let's add a button and this button will say proceed to the checkout okay it's gonna be uh it's going to be math raised button and it's gonna say Pro seed to check out you can make this one uh color set the color to be primary so it stands out and let's float it to right so let's add a class quote right okay let's go back to card and here we have the procedure checkout okay instead of implementing the API first I think that it makes much more sense to First implement the logic of the card and when I say the card I mean uh let me just enlarge this and when and when I say card I mean by adding and removing the items from the card right in reading them on different places for example if you want to read the items from the card here on the menu and we want to read them here as well on this card page so let's Implement that okay uh let me actually minimize this entirely and we can focus more on coding here so what I want to open here is I want to open the home page and on the home page with your product box here and I want to add a new event basically so on this button which is basically this shopping cart here I want to add this product information to the new service that we will create just in a bit okay so let's add a click on quick event let's call uh on add to cart okay now let's create this method so let me close all the other files let's open the typescript file here and let's add this method so this method is not going to be returning anything so the return type is void and we are also not passing anything so what this method does it's going to emit the product that we are going to get from the input but for now as we are not getting uh as we don't have anything we are not catching the actual data let's create this product as uh as a diamond datum and the type of this product is going to be product but yes we don't have this product uh interface created yet let's do that so inside of the models create new file and name it product.model.ts [Music] like so okay and now let's create new interface export interface product and this interface is going to have an ID with step number title which is type string price which is type of number category step of string [Music] description which is type of string as well and the image this type of string so these are all the properties of the product that we're gonna use and we're exporting this make sure so that you are able to import it in the file that you need so here we can just go and import it on top so import product make sure that it's imported and now let's uh it can be actually product or undefined because once when we implement the API we will pass this uh through the input same thing as we are doing here here with the full width mode and while it's fetching the data this product can be undefined for a little bit of time right but now let's uh create an array which is a dummy data and we can just copy from this product the object definition so it's easier to create this object number let's add one title what we can create we can create sneakers sneakers price 150 by the way I'm not sure if the spelling of synchronous is correct so sorry about that if it's not category shoes [Music] description I'll just put the description board and for the image again we can use the one that we are using here placeholder okay so instead of this string let's put this placeholder and like so okay now what we can do is we can go and use this product to emit but in order to tell me this product we need to create event emitter so let's add an output again this is the way how you communicate uh with the child and the priority component okay output and we will give an event name to add add to cart which is a new event emitter okay and make sure that you import both of the output and event emitter on top here from angular core and what we can do we can call this dot add to cart and emit our product this dot product so it basically means that somebody clicked uh on this shopping cart and he wants to add this this product to the shopping cart yes so now we need to catch this this method in inside of our home component so let's go to the let's close these components and inside of the home component let's scroll to the product box actually we can remove these ones and we will create Dynamic ones later on so from the app product box okay we have new event and let me set the view to word wrap as well here so that you can see all the classes okay and the attributes okay so we will get an event which is called add to cart and we want to create new method here on add to cart and for all the events that I'm passing from the child I'm using the same attribute name which is called the event that's just naming convention that I like to follow but you don't have to obviously now let's create this method now it will try an error because we don't have this method created yet so on add to cart and uh this method is going to return nothing so the written type is void and we want to create a new basically service that we are going to be using where we can store the date the actual data so let's do that inside of the app folder let's create new folder and call it services okay and actually let me just comment that this is how to cut because it's showing us an error and it looks like we are doing something wrong I don't like to see errors okay let me open up the terminal and let me see where we are at so we are at the pages so City on the upper the right directory and change into Services okay and here we want to let me just clear the console and here we want to generate NG G for Generate service so s is for service and the name of the service is going to be cart service okay let's take just couple of seconds to create this service okay so it created this card service but you can see it hasn't updated the app module so we will need manually to import this service so if you go to deep Services you have the card service and what we want to do is we want to go to app.module and we want to inject our service in the providers array here and make sure to import from the card service here so so that we can use it and it's imported here on the top okay I can close the terminal and save this up close the module and now we can import this service or actually we can first Define all the things that we want and that we need inside of this service so service is going to hold one property that will be used across our application so it will be named cart obviously and it's going to be new Behavior subject here and you need to import it from rxjs okay and the type of this Behavior subject subject is going to be card so the card model that we defined in the in the models card dot model okay and we need to set the default value which is going to be uh object with empty array of items like so so why how do we use this card uh Behavior subject is basically it holds the initial value and once we update for example we add new products to the card it just adds new value to these items array and in every single component that we want inside of our application we can subscribe to this behavioral subject and we can receive the new values and update the UI that's how it works okay so in this card service we want to add a snack bar stack bar components so we will use private underscore snack bar and the type of this uh Services called math math snack bar like so so make sure to import it as well here on the top and what this component or service actually does it displays the information to the user so once we add the product uh to the cart we want to display the information that we have successfully added this product right so now let's add a method add to cart this is the method that we I was talking about so this method is not going to be returning anything so the type is going to be void because we're just going to update this card uh object and we're going to emit uh but we're gonna have a item receive and the type of the item is going to be card item okay and make sure again to import it on the top so now we're gonna create new items array and this is going to be because we don't want to affect uh this default this original card object so we can destructure that object and create new array and we can just go reference to this Dot card dot value we're accessing this Behavior subject with the value dot items okay like so here and now we can find the actual item because uh when we're adding items inside of this card we could be adding the same product multiple times so we just want to increase the quantity and if there is no such product inside of the card we just want to add it right so let's do that so let's define const items in car so we are trying to find if there is there is this item already added in the cart items dot find and [Music] here we have an item and we're just gonna check if the item the ID is equal to the item that we passed here it's argument dot ID so if this find method finds an items an item it means that this is not going to be null or undefined so we can check here if if it exits if it already exists in the card in the card we just want to increase the quantity so let's just item or actually this is not multiple this should be a singular item in card so if item in card is there just increase the quantity by one let's use the shorthand plus equals one otherwise we want to push this to the items array so otherwise we want to else we want to use items dot push this item okay so otherwise you're pushing this new item to this items array in all and what we want to do at the at the at this very end this Dot card we just want to emit this value so that every single component that is subscribed to the card can catch that value so please Dot card dot next and we can emit the object with items so basically this is the exactly the same as writing items or items but the shorthand is just to remove the key and value and you get the same now what we want to do is we want to open up the snack bar these third underscore stack bar this is that service that displays the user's information so it's very useful and we can for the first argument we want to pass the text one item added two card and the second argument you want to pass the text that you want to show on the button so let's say okay and the third argument is object and we can set the duration of the of this uh pop-up of the stack bar so after this amount of milliseconds it's gonna close so let's set it to 3000 which means three seconds it's gonna it's gonna stand there for three seconds okay and now let's just uh console.log uh this Dot card dot value okay so that we can see in the log what we're updating and here inside of the home component we can inject the service that we just created okay so go to private card service and imported card service okay so it's important on the top from Source app services card.service and now we can use this service okay so here I'm going to add to cart we are actually receiving the value here from this event from App product box okay and this parameter is product in the type of this is product product interface that we created as well here it's imported on the top in the models product model now what we want to do is we want just to call this dot servicecardservice dot on add to cart and we want to pass an object okay so the product is different from the cards card item so we want to uh send different parameters or actual properties so the product is product product dot image the name is product dot title and this is the beauty of the typescript you'll get all the properties uh you know show it to you so you don't have to think about them the price is product dot price quantity quantity is going to be 1 because we are just setting one item and the ID is going to be product ID dot ID okay and if you're wondering why the naming Convention of this uh interfaces is like this is I'm I'm mapping uh the API that I'm going to be using and that we are going to be using in this tutorial uses these exact name fields so this is how I created this object so that they match the API data contracts so that's why that's the reason for it okay so now let's go and save this home component let's say the HTML file and let's try to add an item to the array so if I go and inspect we should see uh the value of the card okay let me clear the console and enlarge so you can see it if I click on one item has been added to the card and we can close okay or actually close this out to three seconds and we get log from the card service if I expand the items we can we can see that inside of the items array we get now one product and we get the all the information that we passed now let's test if we click again we should get still one item but it should increase the quantity to two Okay let's try that so let's click again one item added to the card okay and let's see we again get uh the same log from the card service and if we expand it we can see that the quantity has been increased to two so this works as expected okay the next thing which I wanted to do here is I want the actual card menu to be updated because as you can see we added two products but still it says here one and we want to make this Dynamic and to Loop through all of these items and to show the actual price here so let's do that so where we can handle it all of this using the cart components so let me close all these files and let's open up the header components in the app folder and let's open up the headers here and what we are going to have in this component is we're going to have cart which is going to be subscribed in the home component and passed in this header component so will help private underscore card this type of card and let's initialize the default values so it's going to have the items property which is going to be an empty array at the beginning and make sure to import a card the another thing that that we we need is the items quantity as you can see right now we are displaying this static one value but we want to update that based on the number of items and the quantity of those items in the in the in the card itself engineering is not going to be used in our in this component so we can actually remove it if you want to use a little bit of cleanup and here we want to receive the actual card so we will have an input let's initialize it so make sure to import the input and we will create a getter and Setter that's why I'm using the underscore the card because this is the naming convention that usually programmers do when you have underscore card it means that this is the private field okay so we will get set here together so get our card which is type of card and we'll just return this uh underscore card here so this is the getter and now let's set the setter so to set card fill the receiver cartridge type of card and here we will set this card equals to the card and also every time that card changes we want to update this item quantity if we don't have a field for iOS quantity so we need to actually create this logic so what we can do is we can you can use this item quantity and we can Loop 3D card items colored items and what we can do is first we get the object with different fields but we only need the quantity here so so what we need to do we need to add that we need to map our item and only get the array with with the quantities so item dot quantity so what we are doing here is basically using discard items array and instead of the objects we are transforming that you only have the quantity and then we can use that quantity to add up and get the final items quantity so we can use reduce to do so and again reduce uses the previous and the current values as argument and you need to set the initial value which is zero in this case and all we do is we use and add the previous value with the current value and we get the final quantity so again views the items array which is basically a array of color item objects let me transform that into array of only quantities and then we just add them up right and that's how we update the items quantity okay and now what we can do is we can go to our HTML file and we can update let me see where is our okay so here we have actually one items and we can update this value to be the quantity items just copy the property name and it's quantity like so and for the Mad badge here we can also add this value so it's Dynamic okay so at the beginning is going to be always zero and we want to check if it's zero we don't want to display it so set the map that you can use this property for that math batch hidden equals if if there is no out of quantity so it should it should hide it okay let me just see okay I have a typo here I have uppercase i so let's say again and as you can see it removed this icon okay what we can do here is we can check if uh do we if we have items in the card then we want to display this this part if we don't uh we don't wanna so let's add NG if basically uh we want to say NG if if there is uh sorry card dot items dot went like so only if there is car items dot Lan we want to show this uh this this div and now let's Loop through record items and display this information so what we can do here you can just use ng4 Loop or equals let item of card. items in here instead of the keyboard you can use item Dot name and here we can use that in the quantity item Dot dot quantity like so and here instead of the this hard-coded price we want to use the price or actually just item dot price like so okay and for the total here we want to use the get total method that total method which we actually created already in the Pro in the card component so price card actually item.car.items here card dot items what we need to pass is we want to pass all the items to the get total method so that it can go Loop through all of them and calculate the the final value right and let's use this method let's create this method so inside of the header the total this one it will receive return actual number and it will get the items items away of items which is actually added this type of array of card item okay net card component card item okay like so and what we want to do here is showing the error because we are not returning anything what we can do is we don't want to duplicate the code that we have so we can go into Pages card and card component and get this method which is already created get total here you can copy it inside of our service and access this method from two places so here we can add this method and now inside of the card component you can call this method so let's add private underscore or actually card service and name it card and add the type of the card service make sure that the card service is imported on top here and now we can instead of and Define this method we can just call this uh start service method so return this Dot card service and return the method that we just created get total and plastic items here like so and we can create this exactly the same method in the okay let's save this exactly the same method here in the header and it will receive in return uh the the total amount okay so what it's reporting is that we haven't imported the card service so let's do that private cart service right private means that we are going to only going to use this inside of our class component we're not going to use it inside of the HTML so if you want to use your services inside of the HTML you would avoid this private keyword okay card service and let's add the definition of the cart service and it and make sure again it's imported on the very top here let's save this and let's save this and the last thing that that I want to add here and since we are on the shopping cart let's add a method for removing or actually clearing the shopping cart okay so what I want to do is I want to add a new method here on your move shopping cart so when you're on click event let's add uh on clear card this method is not going to receive any argument because you just want to empty the card animate on clear card okay so and we want to let me say this and I want to create a service inside of the card so that actually it can be used on multiple places okay let's go to the card service I can remove this log that we had before and here let's create this method here this method is not going to return anything it's not receiving any arguments so the only thing that we are doing here is here is we are emitting the empty resetted value for our cartilage so we will just call the next with items array empty okay like so and we can display this information to the user this style snack bar dot open card is clear and again let's add okay text for a button and let's set the duration duration to 3000 milliseconds or three seconds if it's easier for you now let's just call this method inside of our add a component here please Dot card service dot clear card okay like so and now we have completed everything except the fact that we are passing this card object so we need to subscribe to our card service for this uh actually for this Behavior subject and we want to update our menu as you can see right now this is empty but if we add something to our cart we know that it gets added because we logged it and tested before but if we open up our card it's not getting any values so it's because we are not sending this card object uh to this to this component so where we need to do that is close this header component and open up the component where this scatter component is placed and that's inside of the our root component so that's inside of the let's just in the app component here okay we have here app header you can remove this title we are not using it and we can create new cart property in the name and the type of this card property is going to be card and let's add the default values like we use yeah but like we usually do so the items array like so and it's empty array now we want to implement the NG on init life cycle hook on on in it and make sure that it's imported from the angular core now let's implement it so here energy on connect [Music] this basically method runs when the when the components are starts initialization okay and we want to include our card service in the Constructor so let's define the private cart service this type of card service here and again it's being imported on the top and now when the component is initializing we want to call this Dot card service and we want to subscribe to our cart property so subscribe there and it will receive back a card once it gets updated and all we want to do is we want to update our card property here this card is equal to cart okay and now what we can do here is we can use this card and pass that to our header component and that's exactly here so cart is equal to uh card let me just created okay and let's test this out so now we should get this card component updated as well so if I click you get here notification that actually we get one item added there and if we open up we can see that we have one items and it's basically sneakers quantity one and this the price and this is the total price let's try to increase the quantity so we have added another item we get the quantity to two and we actually see that we added a quantity two so let's see if we add additional product so let's say or actually I think this is enough for just testing purposes later we will try with the actual data but for now it's it's it's okay so the next thing that I want to apply is once somebody uh ask a product to the card he wants to go to view the card and here we want to update this card page be the cart as well so we need to subscribe to the card from the card uh page component as well and to Loop and display all this information there as well so let's do that so in order to do that let's close the app component and let's open the Pages folder and open up the cart component okay so here we want to subscribe to our new created cart item so let's just call this Dot card service Dot cart dot subscribe here we get back new card which is type of card okay and all we want to do here is we want to update our card with this new one underscore card okay like so and let's set the data source here two card items okay [Music] let's refresh your card is empty you're not saving this into local storage this could be a fun exercise for you guys but for this tutorial I'm not going to handle this in the local storage so every time that we actually refresh it's going to lose the state you can fix this with local storage and sell save all the information there so let's add a couple of uh items to the card and now let's view the card and as you can see we got two uh items in the in the card and it's actually displaying now this information so the next thing which I wanted to implement is let's implement this clear all so that we can actually clear this card so let's add this method so on clear card it's not returning anything because we just want to clear a card and here we will just call this Dot card service dot clear card we already Define this method okay and now we want to call this method this method on clear card once you click on the clear all so let's find this clear all button so it's under the actions here and let me grab this so you can see view word wrap so you can see everything and here on the button let's add clear all let's add a click click is equal to one clear card now let's try again so start shopping let's add one item let's view a card click clear all and card is clear and we get the message okay start shopping so what we want to do next is let's add so if I add some products here new card so let's add this clear so we want to remove only this rope so maybe we have a couple of items maybe we have like three or four products in the card and we want to remove the specific one so we don't want to clear entire uh card so let's add that method so let me just see where that method is so it's on this here on this element okay and let's add a click event here click event and the name of this event is going to be on remove unremove from card make sure it's camel kids okay copy that let's head over to the card component and here let's create a new method and it's going to be called on your mobile phone card okay and actually we need to pass an element here because we want to remove only one element so only move from cart and let's pass the supplement okay any side of the only move from cart is not going to return anything so return type is void but it's going to receive an item which is cart item okay and we will gonna create this method inside of this service so this Dot card service [Music] and we'll name it remove from cart you from cards like so and we'll pass an item here now let's define this method the card service open up the card service here and let's add this new method it's not it's not going to return anything it's just going to update the cart object and emit that so what we are going to do here we're going to receive item this type of card item let me show you the part item like so and we want to Loop through the cards uh elements so this is the card dot value dot items and we want to filter there are multiple ways in order to remove an item from the array but we can use filter for this one you can choose your own way so basically we get the item inside of the loop and you just check if the item dot ID is not equal to item dot ID so basically all the elements all the items in the array that are they don't have the ID from this item are going to pass this so we are only removing one item from the array and we want to store this to new constant and name it filter filter items like so okay and all you want to do now next is we want to update this Dot card dot next update the items complete filtered items and we want to show corresponding message to the user did these dot underscore snackbar dot open and the message will be one item renewed from car Dot and let's add control text okay and let's add duration to 300 milliseconds or three seconds again okay okay let's save this all this stuff and we can try this now so start shopping and let's add a couple of items into into the card you can view card and we remove actually this is not going to be tested properly uh because we only have one item in the card but once we are added the API you can see that we are only removing the row and it at the end as you can see it works as expected one item has been removed from the card okay the next thing that I want to implement let me just add one item again and so what I want to add is basically I want to add this quantity feature so we want to be able to update the quantity inside of our cart page so let's create it so let's first uh add the addition so this is going to be easier so we want to find this method for the quantity here a quantity and this is the button for removal and we want the button for addition okay so let's add a new event click click and on click we want to add new method which is called on ADD who wanted to be okay and it will pass the element as argument so it's this element okay and let's add this okay sorry my mouse is jumping around let me just see on ADD remove from card and foreign quantity here let me copy it and let's add this method here when you have the quantity so this method is again is not returning anything but it's accepting the item which is a type of cart item and this method has already been created so we will just call this the service card service dot add to cart and we'll just pass an item and it will go to this card service and this add to cart method and you'll check if this item is in the card if it is it will increase the quantity and since it's already in the card it should increase the quantity right away so let's start start shopping add item to the card okay now let's go and view the card and let's try and yes the quantity is getting updated as you can see and the total uh price is getting updated as well the total and here the total okay the next thing that you want to add is to remove the quantity which is not working but let's add that so let's go to the on ad quantity and let's add new event let's copy this here let's add new click event here and for this one let's call it on remove quantity one remote quantity okay like so let's copy it in here let's add this method and remove quantity is going to be similar uh like the previous one so it's going to have items what are actually the item that is called Adam his argument and it's not going to return anything okay and we are going to create new method because we don't have this method in the cart yet so but let's call it this Dot card service dot on or actually just call it remove one DT okay and pass the item now let's copy this method definition and let's create new one okay so let's here in the card service let's add new method here and this method is going to receive new items so just add item this card item and the return type is going to be void because we are not going to return anything okay now let's what we want to do here is we want to Loop through the array of the item same as we did here on the on the on the add to items but we want to Mark what is the quantity that we want to remove so face Dot card Dot value dot items and just map we access the item inside of the array here and we want to check okay if this item the ID is equal to the past item.ie is it if it's equal to this one so this is the item if you want to remove the quantity so here we want to remove item dot quantity let's use the short syntax minus minus so here we are removing the quantity but the one thing there is one Edge case we want to check if the quantity is zero so it basically means that uh this this item should be removed from the card right so if if we hit like zero if if we are like on five we just hit minus minus and it's four and that's fine we're good to go but if you are like on one and we hit minus minus we hit the zero and it means that this product needs to be removed uh from the card so what we can do is again check here if item dot quantity is equal equal to equal to zero we can actually mark this item for removal so let's create another uh variable let item or removal and this is going to be part type of cards item or undefined okay so if if this is the if the quantity is zero item for removal is equal to item okay and then once we updated this we can just return the item mapped item return [Music] like so so here we are mapping the this array and basically we are updating the quantity property and once we map uh this array we want to store this inside of the variable so let's call it flat filtered items like so and now we want to check if we Mark any items for removal and we will call the method that we already created for removing the items from the card right so if there's item for removal called this Dot uh remove from cart and pass in filtered items or actually yes I don't know actually we need to pass the item for removal so it's this one okay because we only want to pass one one argument one property and we want to update the filtered items okay with the results that we have and filtered items is returning in an error what is not accessible to cart item okay let's see so what is not assignable to filter items so what we can do here is we can set the type but actually we are not returning anything from the car so that's why it's uh showing us the error so we need to return something from the card here okay another thing that I want to do here is not only that I want to remove from the card but I also don't want to duplicate the notifications so as you can see if we add the notifications here this dot discover stack bar dot open one item removed card and let's click let's add the OK and the duration inside of the configuration object duration to 300 milliseconds you can see here and we also want to obviously this Dot a DOT card the teammate the new value right these dot next and we want to emit the items filtered items okay but the problem with this is you're calling this remove card and it's also notifying the user so what we can do is you can send a flag so uh like so at a flag do we want to notify the users or not and add here one property so notify or even update update which is equal by defaulty true and here we can check if [Music] if we want to update then I'll update the card and send the notification otherwise you will get two notifications and we also need to re uh to return something so that we actually get this value right okay so we just need to return from the remove from card these filtered items okay so return filtered items so it means that we are returning array off cards item like so and now it should work if we save it let's try now so start shopping let's add a couple of items in the card actually seven of them now if we go let's try minus we're reducing the quantity in plus we are increasing the quantity and let's see what happens if we hit the zero boom it empties the shopping cart and with this we have covered most of the use cases that we wanted for our shopping cart and the last piece of our application is left to be done is basically we want to implement the API so let's do that next so let me close all these files and we need to create another service and this service is going to handle the API request to this fixed or apis so in case you missed it you're going to be using pick store API and the links to this API is going to be in the description obviously and I highly advise you to go into reader docs there are much much more properties and more endpoints that we are going to be using in this tutorial but just in case you want to check and maybe you want to build your own version of the uh store you can go and check it out it's uh the good thing about this uh fixer API it's really easy to access all the data that we need and the Simplicity is what you want especially when you're just learning all these topics okay now let's open up the terminal and we are in the in the services folder and what we can do is we can go and type in NG generate service and name it as store this is going to be uh actual store service yes so click enter and it will take a couple of seconds to make it and once again we want to go and import this service inside of the providers array into the app module so here store type in store service and make sure it's imported on the top here now let's close it open up the storage service the service that we just created here okay so here what we want to do is we want to import the HTTP client first so this is the client that we're going to use in order to fetch the data so add the private HTTP client and the type is HTTP client here and it's getting imported on the top from the angular common http and let's add the base URL for our API request so add a constant store underscore pass base underscore URL and the URL is HTTP s which is the secure protocol or four slash forward slash fake store api.com okay like so and we want to create a get all products method and this method is going to receive two arguments the first one is the limit and set the default limit to 12. and the second argument is going to be sort which is going to be the default sorting which is going to be this which stands for uh descending right the return type of this uh this method is going to be observable and make sure to import it from the rxjs and this observable is going to return the type of product array so array product and again uh make sure to import this product from on the very top it's showing there because we are not returning anything at the moment so but we're gonna fix that just in a second so return this dot HTTP client and we're going to use get method here and this get method is going to return array of product here oops not that just array of product here let's copy that okay let me just type it in array of product okay like so and then inside of the parentheses let's add the first argument is the URL of of the API so let's use the page URL store base URL and then you just use the four slash products okay with this you will get all the uh the products but we want to apply the limit and we want to apply the sort as well so what we can do here we can add now question mark sort is equal to and let's add the sword and we can also add a limit so limit is equal to limit okay and with this we can get our products and the place where we are going to call this is actually in the home page component so open up we just shrimp down this middle and open up the home page component and here inside of the NG on in it we're going to call this com uh call this method but first let's create a the variable where we're going to store this so we're going to store this inside of the products a variable and it's going to be the property type array of products okay and at the beginning is going to be undefined so that's why you need to pass the undefined type as well here uh we need to sort variable as well in the default value is just descending and the count is basically the number of items that we want to display right so let's set it to 12 which is default one okay okay and we want to have an production products uh subscription products subscription uh variable this variable is going to contain our subscription and once we destroy the component we want to remove anything because we don't have we don't want to have any memory leaks I will show you how to do that so the type of this is going to be subscription you can import it from rxjs here like so and at the beginning it's going to be undefined okay now we want to import our service inside of the Constructor so here let's add a comma private store service and type is store service okay and again make sure to to import that from our services folder here on top and now inside of the engine in it we can call this foreign so that we can call a couple of times when you're changing the filters the and the other uh other sorting and showing the columns menu uh functions so let's create this get products method and this method is not returning anything or receiving so it's just going to update the products here so uh this dot let's call it this dot store service dot get all products and what we want to pass in is we want to pass this dot uh count and twist.sort okay like so and then we want to subscribe to this method and once we receive the products products we want to update our products property these dot products equals to underscore products like so and don't forget the products subscription so what we want to do is we want to store this subscription to this variable we use this.subscription product subscription and equal to this and now what we want to do is we want to implement NG and destroy on Destroy and make sure to import the on Destroy here on top it's reporting the error because we are not implementing NG on Destroy and we are set at VR so what you want to do here is mg on Destroy and it's not returning anything so we got this nice Auto completion and we just want to check if this Dot uh products subscription exists so if we created a subscription we want to unsubscribe is the product subscription Dot unsubscribe otherwise if you navigate to home page and card page for a couple of times you may end up creating a couple of subscriptions and uh you will result in memory leaks and that's something that you don't want to have on your application especially as your application grows you may start losing uh keep start losing the track of it so what we want to do now is we want to use the app products box here basically and we want to Loop to the array of the products that we just attached here actually we may end up with an error because I don't see my layout so let me see what we actually got here oh actually it's reporting that we haven't injected HTTP client inside of our HTTP uh inside of our app module so what we what we need to do uh basically we are using inside of our store service we're using this hdb client but it's not imported inside of our application so what we need to do is we need to go to the import survey an imported http HTTP client module here and now we can use the HTTP requests close that and are up now our application is back you can go to the home component that because the store component and let's use these products array and now let's go to the HTML file and let's make this Dynamic product box so on the matte grid tile let's implement the ng4 and G4 and let's product rate product variable of products and what we want to do is we want to pass this product to our air product component so here product is equal to product [Music] now let's go to the app product box which is in the components folder product box here and we want to add an input for this product so here we are hardcoding this but we want to remove it and we want to create this as an input okay now you can save this and save this and we should get our products here so let's see if this works okay I see uh this works because we are getting some more products that we created but actually the only thing which is missing is on our product box we're using the static data that's a problem so what we need to do is instead of creating this uh static data we can actually use the product that we just got so let's do that here in the source we can use okay you can use product dot image for the H5 we can use this is the category so call it product Dot category okay let's save that up okay so product image it's not possible because our object is undefined so what we want to do here is we want to check if we do get the product or not otherwise or we can even check uh we can check on two places so one one of the places where you can track you can check here so basically you can do NG if product so this way there's not going to be a chance that this product is undefined as as you can see here we're getting the images and we're getting the categories the sneakers is uh snack bar so it's a chocolate snack bar it's not the shoes so this is wrong naming everything is wrong so let's fix that up how we can do this is we can access the property of product dot name this is the name of the product let's change the view to the word wrap so you can see everything for the description we can add okay let me just see product name so property name doesn't exist on type product okay this is a good thing of the typescript or let's see what is the name of the actual product uh the name is the title actually okay so product dot title then for the description as you can see now it works and you can see now that we have that front truncate uh class it's working so we have this very large title and so it's cutting this off and once we hover over it shows the entire title okay so what is left to be done so once we switch over on on one uh one product per row layout we get this description which is static right now so let's fix this okay let me just increase the this layout okay like so and so for the description we want to use the product dot description here and close the brackets and for the price we want to use the product dot price here product dot price like so and let's test now how it works okay as you can see we are getting these prices different now so we're getting these titles we're getting this uh these categories and if we and if we change the layout mode we get a description as well here obviously the format of the images is not exactly the same in every product so this is why we get these inconsistencies but I don't mind that to be honest okay so this is the the different layout Inlet now let's test if we add different products to our card item so you can see we add a couple of items we added four of them and you can see we get the the description we get a title we get the the total amount that we are uh with we are supposed to pay so if you go and click on view card you can actually see that you get all this product updated into the card and here we can update the quantity like like I said uh and we can remove the quantity here and we can remove the one item per row and we can also clear the card let's test that out here and we can now return back so uh the thing which I wanted to implement next is actually let me just show you so the thing that we want to implement is once we click on the sort description or sort by descending or ascending or when we click on show 12 or 24 or 36 we want to fetch again all these products and send different parameters so what we need to do is we need to go to the home component here and inside of the home component we want to catch this sort and account being changed so the actual component that holds this counted sort is the actual app products header so here in the app products header you're changing these values and we need to emit these values so let's open this file in here basically we have this sword and I'm so count we want to create this as output so let's create two outputs and emit these values so we can just copy paste this a couple of times and let's rename these two items count change and the last one is going to be sort of change and it's going to emit this string type okay so when you change when we change the sort we want to emit the new value so this Dot uh sort change dot emit and we want to emit the new value which is basically new sort okay and on the uh items count change or yes we want to emit new value so this dot items count change emit new values so account like so and don't forget to emit this field okay and now we can catch this item count count change and sort change inside of our home component so let's go to the home component and here let's change the view to word wrap okay and let's add two more events okay and let's copy paste the name of the event so the one the first one is items count change okay so this is the basically when you're changing this item count so 12 24 36 so basically we need to set the limit to the request uh items count change and then we want to call the method on items account change event and let's create this method here inside of the home component and let's add it here at the bottom and item is called change this method is not going to return anything so it's going to be void but what is going to be it's going to receive a new description so description is going to be a type of string or actually not description sorry this is going to receive the count which is going to be a number and we want to update this Dot count is equal to count or we can rename this to new account so let's be done you have the overlap for the new account like so and we want to okay so it says that it's not assignable to string so what we can do is see here is we can change this to string okay so we can change this format from number to a string and then we can call again this Dot get products so what we are doing here is basically we are updating the con count variable and we are calling this get products a method which actually uses this dot count and this.sort on the second method we want to update the sort and again call this product so let's take this sort change okay home so this is new event Source change and we will create new method on sort change which will also send the Sorting new sorting value copy this save it and let's create this new one so on sort change and we will have new sort this type of string it doesn't return anything so the return type is void and we will update this Dot uh the name of the property is 200 update you sort this dot sort is equal to new sort okay and then again we want to call this dot get all products because we want to I'll catch again and with this let's test it out and let's open the console so that we can see if uh we what is the the actual values from the network tab okay let's refresh the page okay and we get the first initial request which actually sends the sort is description a limit to 12. what if we set the limit to let's say 24 refresh is the page it says the new request which is fix our API products sort is again description and the limit now is 24. what if we change the value to the ascending it refreshes the page again and sends another request and now the sort is ascending the limit is 24. so as you can see this is dynamic and these filters work as expected uh the next thing we should we want to do is we want to use these categories so as you can see this is starting now so we want to fetch all the categories uh that we have and we want to once we click on this category we want to display only the items and the products from that category so let's do that we need to open up the services and let's open up the store service okay so we need to get so we need to add another method here so the name of this method is yet all categories in this method doesn't return doesn't accept any parameters but it returns an observable observable and the type of this observable is array of strings array of strings okay like so so we want to return please dot HTTP client dot get and uh this get method it will return again array of strings okay like so and then inside of the get method we want to pass the base URL which is store base URL and then we want to add forward slash products four slash categories like so okay now we can close this store service and we want to go into inside of the uh home component and we have filters inside of these filters we want to include this store service here and as you can see as you can see we are hardcoding the categories here so we want to make this dynamic so include the private service store service store service and make sure again to import it on the top and here inside inside of the engine in it this dot store service dot get all categories call this method okay and then we want to just update these category so these categories actually needs to be undefined at the beginning so it's array of strings and or undefined like so and what we want to do here we are basically getting you need to subscribe here without subscribe and when we get view response back once back we just want to update the pro the categories array these dot categories equals to respond okay and also don't forget that we want to create category subscription variables so that we can unsubscribe once we leave the home page so let's name it categories categories subscription and this is type of subscription imported from rxjs and we want to assign this variable here categories subscription again let's Implement NG on Destroy on Destroy here and let's add it on the very bottom on this way and we just want to check if this subscription exists if this Dot category subscription exist if it's if it's not undefined and actually it's showing the error because it doesn't have initializer and that's why because at the beginning it's undefined so if it exists we want just to unsubscribe from it please dot category subscription Dot unsubscribe like so [Music] okay and basically this component should be working now as you can see we get all these values but now we need to catch this uh event emitter that we are emitting these categories inside of our home component and update let me just close this value and this files actually let me just see what is the type of the event so inside of the filters the event is show category so we want to when we click on the category here button click on the category we are basically emitting this value here and we want to Cache that inside of the home component so inside of the home component we have this show category actually we have already this this method created so this show category and we are updating this category so now what we want to do is we want to call this get products here this Target products like so but the only thing that we that we are missing inside of this get products is we are missing this category so this dot let me change the word wraps so this dot category so that we can actually apply this category to the actual request so now we need to need to change our get our products method here and we need to add additional property so let's add property which is called category and make it as optional that's why we add this question mark and the type of this is just string okay and now let's add here so so here actually after the products we want to add another expression so we want to check if there is a category string there's category string we want to add four stash got it category and just add this category otherwise we want to pass an empty string like so so basically what we're doing here just change the word wrap so what we're doing here is just we are just checking if there is category if it is we're adding the category namespace and the category itself otherwise we just return the string so it the API endpoint Remains the Same so let's test that out so if you click on the categories and let's say we click on the men's clothing and as you can see we only get these products for the main closing if you click on jewelry you get only the jewelry if you click on the electronics you only get the electronics and it's it works as a spec that and the last piece of the puzzle is to integrate the payment and the checkout and the actual ordering flow so like I said at the beginning of this video is that you need to go on shop.com and you just need to go and to create your account so just go to stripe.com and you need to sign up here so I already signed up and once you are signed up and signed in you can go to the dashboard and once you access the dashboard there's a section for the developers so here on the right top you can click on the developers and in the test mode you need to activate your account in order to get the real live data so here we have the API keys that we are going to be using inside of our application in order to integrate the stripe okay so let's start doing the implementation let me close all of this files and the first thing that we want to do is we want to install a stripe.js package that we are going to be using so make sure that you're inside of the root folder and then let's do npm install let me just shrink down this window npm install add stripe or slash stripe Dash JS and the version is going to be 1.35.0 like so it'll take a couple of seconds to install okay so once again make sure that you're installing the correct version and the same version as I'm doing here and now we need to include the stripe as well inside of the index.html file so make sure to go to the basically source folder and Target the index.html file and we want to include this inside of the head so add a script like so and just add a source https four slash forward slash js.stripe .com and version three and this way we have included the stripe into our application okay I can close the index is index.html file let me open up the terminal now and let me just restart or server now we need to go to the checkout page so open up the pages card actually card page not the checkout page and here we have checkout button on the very bottom here proceed to the checkout so we want to create a method that will call this checkout so here on click call on checkout method so let's call this method here inside of the car component and let's add it on the very bottom what we can do is we will add this method on the card service itself so this method doesn't return anything so the type is going to be void and we need to include the hdb client here what we can do we can also extract this call to the to the service separatus a different service but we can include it into this one as well so let's call it private HD3 now we are just including the HTTP client HTTP client here and make sure again that it's imported you just enlarge it make sure that it's imported on top here and now inside of our on checkout what we're going to do is we want to call the stripe service and let me show you so we are first making the post request so this dot http http Dot HTTP client so we are targeting this service and make the post request and the post request that we are going to make is going to be the request to our local server server that is going to handle this post request and make request by itself on the stripe then it will return the session ID and using that session ID we can open up the checkout page so you will see uh the URL of this request is going to be HTTP it's going to be our local server so localhost and we're gonna open that up on the port 42 442 like so and slash checkout okay and inside of the object we want to uh to pass items so this Dot cards dot items and we can handle these items inside of the server and send that to the stripe okay and once we get the response back so once we uh receive something from the server we can subscribe to it and this is going to be async compression and the result uh we will put a type of any because we don't have any type definition here defined it's a little bit outside of the scope of this tutorial so first we need to load the stripes so let's stripe is equal await and this is why this is a async compression because we need to load the stripe here inside of this uh subscribe subscribe uh scope so we need to use the load stripe method from the package that we installed so make sure to import here import load Stripe from add stripe sap Dash JS so this is the method that we are using to load the stripe and inside of the parenthesis we need to pass the key that we have on our dashboard so once again go to describe.com enter the dashboard and go to your dashboard once you're logged in go to the developers Tab and API keys and the key that we need is this publishable okay and click to copy set copy it obviously you'll need to copy your own key it needs to be different than mine obviously and let me close this and once we load the stripe what we can do is we can use a swipe and we can call the method redirect to check out and how we do that is from the session itself on the server we will return uh session ID and we just need to pass the session ID and that's how we open the checkout so session ID is going to be result here that we respond back and we will just return an ID there like so okay and now let me save this checkout now in order this to work obviously we need to create a local server and run it on the port 4242 and create this post endpoint checkout so let's do that okay let me create a new folder inside of the inside of the root so just create new folder and name it server okay and let me initialize we need a new node.js application so let me just see where we are at we are in the root folder okay so CD into server here inside of the server folder we want to initialize new node applications so run npm in it and Dash why so we don't want any sub questions we just want to initialize the plane node.js application and here you need to install three things so we want to use express.js a framework for our node application we want to install the course because we are going to create some across origin resource requests and we want to install the stripe obviously so let's run npm install course a version is going to be 2.8.5 the next one is Express and the version is going to be 4.18 0.1 and the last one is stripe and the version is 10 .7.0 okay and let me close this card components and let me open up our new server folder okay let's open let's open up the package.json file and and as you can see we have created this new project and installed our three dependencies here so now what we need to do is we need to create our our main file so let's name it server.js like so okay and now inside of this This Server let's create our application so first we need to include the libraries that we need the the good thing about this server is and strike is that they already built couple of pages like success Pages redirect cancel all these Pages for us so we will later on just download these assets and place them in the public folder and once you complete the ordering we can redirect users to these pages so we don't have to build that part I mean you could but this is easier and more faster okay first import the express so comes Express this require Express the next one which we want to import is course otherwise if you don't import and use the course it you will get an error when you're trying to make the cross origin requests so this one requires course and the next one is body parser so this one is for for parsing body uh the the data that we're sending between the servers so as it as it tells by its name body parser and it requires body dash parcel okay like so so now what you can do we need to initialize our application const app is equal Express and we just call the Express without any arguments there the next thing okay the next thing that I want to do is I want to set the app to use the the public folder so let's create a new folder public and let me open up the stripe check out flow so let me show you this so like I said they already have checkout flow built yeah so let's explore this as you can see they have already built all of this and so you don't have to do this these kind of things and spend your time into building like success page and um maybe fail failures page so you can go and click here on the top Explorer documents and it can go on quick start here and once you're here you basically can just copy paste all this entire code if you want to but I can just go and download this and we can use the checkout success and cancel HTML files and just include them inside of our public folder okay just make sure it's downloaded okay so here we have downloaded here and now I can use this public folder and extract it okay actually I need to open up revealing the file explorer it would be good it can work directly from the zip file but it doesn't so let's remove the public folder and let's just include this public folder here okay so in this public folder we have this cancel HTML checkout HTML and success HTML files you will actually only use the cancel and success the checkout HTML file is not going to be used in this tutorial so let's close this checkout page and now inside of the our express application app.use we want to use this folder so in order in order to access this uh these assets from the public folder we need to call Express dot static and pass the name of the folder which is public okay like so now we need to set the body parser so call the app.use and call the body parser and set the URL and code it to extended as false this basically extended is by default uh true so it enables the objects and arrays to be encoded inside of the URL which we don't want so let me just copy paste this one and also what we're going to do is we want to create Json Json application we want to use the application slash Json for for app obviously and now let's use the course so we need to set it up so app that use and call the course we need to set the origin so basically we are enabling course here origin true and we want to enable the headers as well otherwise they will be omitted so set the credentials too true as well okay like so and now let's see let's load the stripes so cons stripe this vehicle is equal to require and now he here we need to include the code and the token from the stripe itself so here we need to call the strike method we're requiring stripe and then we are calling the method with the key so once again let's go to describe.com here and let's go to the dashboard foreign let's go to the developers in API keys and we need to open up this secret key so reveal task key and we can click to copy we can close this now and we can pass this key here to our server okay like so obviously like I said you need to create your own servers and you need to create your own keys right here please don't use mine okay and now let's create a new post endpoint so add the post okay and the name of this request like we created inside of the checkout so if we go to the public folder and sorry here inside of the source app pages cards and here we created this checkout endpoint so let's use that here let's check out and this is going to be async callback so here we have re request we have response and we have the next which will handle the errors in case anything comes up so let's build try catch block here you get this Auto completed from the IntelliJ sorry from the visual studio code and we will create a session variable which we will use to pass that back to our request here in the cart and we will pass back the ID from the session so that we can open up check out okay so what what we are going to do here is basically we are calling the stripe so we are called await on stripe dot checkout uh check out Dot sessions okay and you call the create method create like so you need to if you need to pass an object in inside of this object we'll pass uh the data about our product that we want to to you know to buy so the first argument is line underscore items and here we will use the request that we got in the body so request.body and we will send as you can see here from our client here from our client we are sending items so we can access the items here request body dot items and what we want to do is we want to map this array okay so here we can access the item and what we will return here is a new object and inside of this object let me just make an implicit return okay so you just surround this by the parentheses and this is implicit return and now inside of the object set the currency currency to be uh USD like so set the product underscore Theta to be okay new object and inside of this object we want to pass the name and the images so the name is going to be item dot name and the images we actually have only one image so images but it accept the array of images so use the item dot product okay like so and this is for product data then we need to send the unit amount so this is the quantity unit underscore amount actually unit amount is the actual price so you go to item dot dot price and we we need to multiply that with 100 because they use that in sense and we we want to use that in dollars okay and okay let me close this the next uh parameter that we need to send is the mode so the mode needs to be payment there are multiple ways uh there are multiple modes actually and there are subscriptions one-time payments and this is actually one-time payment so that is what we are selling here and the next thing is the success URL success underscore URL so once the payment has been done successfully we will redirect the user to this URL and actually let me make this double code Codes as well so that we have a same standard and the USD here so let's use the double quotes here always okay so success URL is going to be the the success HTML file from our public folder so-called httpe uh colon forward slash forward slash localhost four two four two and then success dot HTML okay and then we want to add Castle URL as well cancel underscore URL and just add the cancel file what you can do now is you can obviously go and update the success HTML file for example here it says mail to orders it's example we can do collab or code dot dot slower you know add Gmail .com like so and copy paste this as well so that we have custom success page you can make this much better obviously but this is just this this will do it right and instead of the catch error we just want to pass the error back so call the next and we actually need to to catch the arrow here and just pass the error back like so and the last thing I forgot to do is basically we want to return back like I said the session so use the response dot status 200 and respond in the Json format and just having the session okay so we are sending this session entirely here and and the last part actually which I forgot is to open up the port and open up the actual application so app.listen and the port that we said that we're going to be using 424242 and what you want to do is we just want to cancel out log f is running on for two four two four two forty just forty forty okay and now we can open up the terminal and start our application inside of the server run node and name of the file is server.js app is running on four two four two forty okay and our client app is running as well so let's try it let me pressure the application let's select a couple of products here open up the card let's go to the cart page here let's continue proceed to the checkout okay this can this can take a couple of seconds let me open that inspect tool in case we have some errors okay we are getting some error so let me just see and if we open up the console log we can see that the request hasn't been correct so let me see the server what it says okay let's see we are getting some errors so item is not fine we are getting okay received unknown parameters unit amount okay so obviously we have been sending the wrong format so what we can do is we can open up the stripe documentation here and we can just copy paste the correct format so inside of here inside of the Align items let's just copy paste this object okay so here line items it's basically this object let's replace it here okay and now okay let me just see we're mapping here we're closing we need another brackets so make sure that you have right spelling okay and now for the currency USD for the name we will use item dot name for the images like we said we have only one image so use the item dot product inside of the array okay for the unit amount we will use item dot price and we will increase it by 100 and for the quantity we want item dot quantity like so let me restart the server okay mode server the app is running on 4242 okay let me move this here and now let me refresh to see what we get so if I go now at the bottom you can proceed to the checkout if I click on that here okay it's loading and now we get uh our checkout page so as you can see we have these products we have the total amount and we have all this information to fill in so we can type in just test email at gmail.com for the testing you need to use 424242 [Music] then for the month it doesn't matter for CSV doesn't matter the name of the card it's lava and let's click pay no thanks I don't want to save okay we appreciate your business and they basically got the checkout page okay this is expired link because my accidentally uh click on back but if we go to stripe dashboard we should check out and see if we got this payment processed so let's go to the dashboard let's go to the payments here and this is the last one and as you can see we got our products in the dashboard uh and these are the details so slova test Gmail and all of this so what we can do and ask next is let me open up our application again local school localhost 4000. okay let me just change the protocol to remove the secure one okay so what we can do here is we can integrate the shipping so it is we have integrated the payments but if you're ordering something you want to integrate the shipping as well so this is like just a donation uh but if you want to add shipping options so you can go to the documentation of the stripe you have here stripe docs payments checkout and the shipping and what we can do we can just pass these shipping options right so let me see uh we have added these line items and let me just copy this entire part because you can customize it but you don't have to so let's copy it entirely and let's see okay here before the line items let's copy this shipping details like so and if you want to customize something you can easily do that so but basically the options are regular so here you can update like the shipping countries here is at U.S and Canada shipping options as you can see we have like the fixed amount this is like free shipping so the amount is zero the second option is to have uh shipping for 1500 USD dollars and you can like display name all these properties you can alter if you want so let me just in that this code okay like so so let's try this now let's save this let's restart our server okay app is running and now let's test it what we can do here let's select jewelry let's add a couple of products like so let's go to the card your card let me open up the console so we can go proceeded at checkout here and let's see okay we do get now the shipping as well so as you can see on the other on the left side we do have all the products that we created and the total View and the shipping is free okay we have you know two options free shipping and next day sir so if you click on the next day sir you get 15 if you click on free shipping it will take five or seven uh business days so for the email you can test we test at test Dot com name slova uh address one test I just do test for the city New York zip code Virginia this is all random obviously and for the card information 424242 just for two okay you can enter whatever you want here for the CV and if we want to go to pay let's see I don't want to thank uh to save it's recessing should be successful we appreciate your business if you have any questions please email call me swallow I want to save this and if I go now to the to the stripe.com here let's open up the dashboard again and let's see under the payments here we have the last transaction and here you can see all the information so his key are the owner information the address where you want to ship your order and everything looks as expected so with this we have actually completed our application so let me so let me navigate back and let me review what we have created in this tutorial so basically what we did is we created this home page with all of these products which we can uh sort or by ascending or descending we also created this menu where we can choose different number of items that you want to display on our current page we also have the options to change the layout depending on how we want to look and we also have the options and the filters on the left side to filter our categories like Tony's Jewelry men's clothing and so on also there are options obviously because this is a store to add these items to the cart you can open the cart and preview what we have there we can clear the card so this is now empty then again if you want to proceed and buy some new things we can add them then we can proceed to the checkout just click on the Green and here on the checkout we have list of all the items that we added to the card we can increase the quantity we can remove the quantity if you want and just let's say buy only this one man casual sling fit uh this t-shirt and we can proceed to the checkout if you click on proceed to the checkout if you click on proceed to the checkout we get this checkout form where we can enter all the shipping details and the card information and we can submit that to our stripe dashboard and with this we basically build our e-commerce store I hope you enjoyed it and I hope you learned something new well that's all for this angular video thanks for stopping by and don't forget to subscribe code with sloba [Music] thank you for watching the entire video to see more angular tutorials click here [Music] foreign

Channel: freeCodeCamp.org

Views: 180,952

Keywords:

Id: Kbauf9IgsC4

Length: 227min 25sec (13645 seconds)

Published: Tue Oct 11 2022