Angular 5 Bootcamp FastTrack: An Intense Bootcamp Course That FastTracks Your Angular Learning | Brett Romero | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Angular 5 Bootcamp FastTrack: An Intense Bootcamp Course That FastTracks Your Angular Learning

teacher avatar Brett Romero, Bitesize Business School

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

23 Lessons (2h 47m)
    • 1. Course Overview

    • 2. Module 1 Introduction

    • 3. Project Demo

    • 4. Overview of Angular

    • 5. Tools and Code Editor

    • 6. Initializing A New Angular Project

    • 7. Adding routing to App

    • 8. Completing Routing Functionality

    • 9. Module 1 Summary

    • 10. Module 2 Introduction

    • 11. Completing About Page Layout

    • 12. Home Page Layout

    • 13. Home Page & Carousel Layout

    • 14. Turning On Routing

    • 15. Creating The Products Page

    • 16. Dynamic Display of Products

    • 17. Backend Product Functionality and Styling

    • 18. Cart Layout I

    • 19. Cart Layout II

    • 20. Cart Controller

    • 21. Cart Styling

    • 22. Module 2 Summary

    • 23. Course Summary

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

As a busy developer, it's difficult to find time to learn a new programming language or framework. Insert Angular 5 Bootcamp FastTrack.

This course gets you up and running with Angular in less than three hours. You'll understand how Angular apps are laid out, how to create them from scratch, routing and be able to talk about Angular thoroughly.

If you are ready to add an in-demand skill to your toolbox, sign up and and I'll see you inside of the course!

Meet Your Teacher

Teacher Profile Image

Brett Romero

Bitesize Business School


Combining the skills of an #entrepreneur, #writer/#author and software engineer to deliver a unique perspective on creating profits.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Course Overview: I like to give you an overview of what to expect from the course. The course is broken up into two main large sections. So the first section we're going to get the introduction. This is going to include going over concepts of angular, so it's not gonna be a full course on anger. But what I want to do is just provide kind of how the layout works with angular, and then we're gonna go into a few other detail concepts, but not too much, because this is a very hands on course. So we're gonna learn a lot about those concepts in detail while we're building up a real world application. So we have some tooling that we're gonna go over very simple tolling. In fact, Ah, this is going to be a free editor that works across multiple platforms. And we're going to just create a simple app so we can kind of see how everything rose together and produces an angular out. Then the next section, we're going to build a project, a real world project, and this is going to be a shopping court project. We're gonna have any commoner store where we list out a bunch of products. Someone can add those products to a shopping cart, and we can go and check out and it visa card out, um, on the sidebars. Well, we're gonna have a place where we can add links to the sideboard dynamically. So it's going to give us the opportunity to see how the controllers, the views, work, the models, how everything comes together, how we create the functionality between the back in and the front end and have a communication available to make things happen on the Web page. So that's just a overview. There's a lot to cover, so let's go ahead and jump in. 2. Module 1 Introduction: welcome to our introduction into angular module. So in this module, I'm just gonna give you some ideas of what we're gonna go over. So you have some expectations of what we're going to be covering and what you should get out of this module. So the first thing is to just take a look at the project demo. So the website that we're actually going to be creating just get an idea of what the target looks like. And they were going to get an overview of angular so kind of a quick overview, because we're gonna learn so much about angular as we're building the project, just getting very hands on. Then we have a look at the different tolls in the code editor. So tools like in P m. Is one thing we're going to be using and how to download different plug ins that you may want within PM The code editor visual studio code, which is free and cross platform is what will be using and really integrates everything into just that editor, including our command line. We're going to see how do you initialize a new angular project and then we're going take, take a look at How do you add routing into your module dot ts for the main application? Because without rounding, you can't really go anywhere else and see any other pages. Then we're going to complete the routing functionality because there's quite a bit to building it up there, several files involved. So that is what we're going to be covering. Let's go ahead and get into this module. 3. Project Demo: I to give you an overview of the site we're gonna be creating in this course. So this is our site. It's a store. You can see we have a carousel that goes through the images, These air free images coming from the noun project, they'll be inside of the zip. And I'm just given accreditation here. Just leaving that we have carousel captions is basically what this is here, this button We can click and go viewer images, which are products which will do shortly. And over here on the right, this side boards here. So we basically have two big columns. We're gonna lay the site out using bootstrap for so we have angular five. We have bootstrapped for those kind of very specific is for Aziz getting the version ing because it's always updating. So at least for this course, those of the versions that we're gonna be working with over here in the sight borrow, You could see also have this title and this link. So this is just some additional functionality to show you how to add other items into the sideboard. Dynamically. So, for example, if I want to add yelp and I could just do w w dot dot com ad that they're now it just fits right in. I can click it and we'll go out to yelp. I'm just gonna open in a new tab just to show we pretty pin the https to make it valid. So that is there we have our products are listed out here in nine items inside of this table. We can also click. Add an item to our court. You concede it increments toe one. We can add coffee that increments. And then if I click open, I can see what these items are. So then I can go into our cart. There's the items. Are bills being calculated? I can increments these. So let's just say another americano, they can be deleted. You could see the X here and in the bill updates as well. So we're not tight into a payment processor, but we just kind of mock paying the bills. So you click this it brings up, it's got a confirmation. So on the back in its grabbing the data at least and showing us so that data would get sent to the payment processor, for example, we click OK. This card is cleared out and we're done. We have another page here called about. That's gonna be the 1st 1 we're going to go after, since it's very easy. What is going to do is besides the home page, which will get automatically created by angular, and we'll look at that. Once it's done, we'll have this about page, which is our own custom page. We add in there so we'll see how that's done as well. Then we have a little bit of expansion on that original website, so it's very much gonna be as we build. It will check it out in the life sight to see how we're coming along with our progress, which is really great when you're learning because you can see the impact. Anything you're doing is having, at least on the finished product. So that is a look at the website we're gonna be creating and what we're going to do next is go ahead and start getting into initializing this project and then eventually start adding in all the custom elements that we have 4. Overview of Angular: we're going to do a quick overview of what angular is about and mainly look at the structure of an angular framework. So not so much getting into the code and how to do different kinds of buying dings and declaring variables just mostly in overall. How angular operates so angular is a cross platform Web development framework, and there's a lot of them out there. So some of the things that angular brings is the structure that it has, which is fairly consistent. Um, also, you can develop Web and desktop APS as well as mobile. You can develop spot apso, single page applications, and then it has some great binding for to a binding where you can get data from the back end into the front end and not have the page refresh. So ah, lot of dynamic things can happen on the page without it having to completely refresh. So let's look at the file structure. This is actually from the application we're going to be creating, and this is the same file structure. So on the right side, that little piece there actually goes below this bigger piece. So if we look at this, we have starting at the top. I'm just gonna point out a few of these all of these right here with the red line next to them or components that we've created. So when you create your anger application, you get all the other files and then we're going in and creating these particular components, and I've got the home component opens so you can see what is involved with a component. So anger as these files the way it works basically is you have, for example, the HTML file and the CSS that acts like the view. So if you think about an M V C application, then you've got the component dot ts, which is Thekla stroller, and the TS on there is for typescript. Now it's not necessary. You have to know typescript because really you can use javascript, which is what we're going to be doing as we work on the back end of our application. And as far as the spec that ts, that's not something we're going to be using. There's a little bit of auto generated code in there that we don't really have to concern ourselves with. So when we're dealing with a particular component. You stay in the components as we're building out the home page, we're going to be working with our component dot ts and in our HTML and CSS files, and it's the same way as you go through the other. So the cart, the about the products, they're all kind of contained within that component structure with those four files. So this component, ts again is gonna be the type script file. So going from angular one into angular to which was this huge change in broke a light, it was basically ah, not really a way to migrate. I mean, there is migrations out there, but, um, terribly difficult to get things to migrate from. Anger want to anger to since angular, too up into anger. Five. At least there's been mostly changes on the back end. So one of the changes that they introduced into oh, version was typescript so that now you can use the typescript of language inside of angular , and so you'll see these type script files various places you could see below. There, we've got the APP component ts the module ts the app dot router dot ts files. So a lot of typescript introduced into anger and then looking over here in the bottom portion, which is the section on the right side. We have this package dot j son. This contains the various versions of components that were installed in the application. So we're going to use in PM to install different kinds of components into anger and package . Jason will keep track of the version of those. And when you give your folder to someone else they could just in PM update, and it's gonna look at the package Jason, and pull down all the different dependencies that the application needs. So over here the snow modules is where all those in PM packages live. So in PM, just ah, package manager. It's basically no GS package managers would in PM stands for. So you do need know J. S. And we're going to see how to get that and you'll have in PM and you could pull down these packages and looking at our app dot router dot ts. This is where all of the routing is contained, or most of it. There's some routing there to spread out into other sections, but basically what the route is going to do is allow you to go to these various pages. So the about page the home page, the products page, the cart and with routing you bring in those components, you import them, you specify where the files are defined in. That sets up the routing structure. So we'll see specifically how that's done whenever we start creating the app. But we're going to take a look at routing now on the angular website and just get it kind of, ah, tour of the angular website as well, because routing is such an important component when it comes to angular, it's really important to understand how it works so that you can separate navigations throughout the site and before we jump over there, just one last thing I want to point out. So we have the index that HTML, which you can see kind of towards the bottom on the left side the way that they're used. You kind of get this nested structure. So the index that hte emails going to provide the script of references for bootstrap for angular, for example, um, and then you're going to have the body tag, and then there's a placeholder for the angular out. So it's got a app route tag there inside of the body tag. That's where the angular APs gonna come in. Then you have the app dot component that html that is going to nest inside of the index that HTML so the app dot component donation. L think it is kind of the first touch of an angular application and and the visuals of an angular application. That's what you're going to see. It is going to be the template for the website, and in there we're going to see how we have this router outlet. This router outlet then starts bringing in the components of the angular abso the about the car at the home. The products and those are gonna be the specific content section. So you have starting at the top of the hierarchy have the index that HTML Then you have the app dot component that HTML then you have the particular component dot html. So the cart, the home and the products Okay, so let's go ahead and take a look at the angular website and routing specifically. Okay, so this is the angular website and they give you an overview of the various things that angular conduced here and what we're going to do is go into the docks. So this is another great place to learn about angular in a lot of details. So you have the getting started right here, the quick start that's going to go through and give you some good explanations. You could see MPM being used here to do some installations, how to create the anger app. So we're gonna be going over those particular things. There's the tutorials, a lot of good information here. So we're gonna go into this routing section, and they also provide amore in depth explanation of how routing works and it's quite in depth. And trying to go through all of this right now is not really gonna be helpful because you're just diving into so much theory. It's really important to see how things glued together to understand how it works. Now this is just a tutorial section for routing. There's a whole other sections unrelated. So routing and navigation. This section here is also very good to learn about routing. So right here the app dot module dot ts You could see what an import looks like So they're accessing angular than they're accessing a particular you can think of. This is a library called Router, which brings in some components and that are gonna be used inside of a class. So down here, you can see it gets a little bit more detailed. And here's the class. Nothing being defined in there right now. So as we build our application, we're going to see that we are, in fact, defining things in there. Here is the router outlets that was mentioned earlier and again, if you think about that hierarchy, so you have the index dot html, which has Thea route and then uproot is where the app dot component dot html comes in and displays and then inside of the app dot component that html just working down the hierarchy . You have router outlets, so instead of uproot, you have router outlet, and that brings in these sub components of the various sections of your app. So for us, it's gonna be like the cart, the products and the home page. But this is also just kind of giving you an introduction to how you can get around the anger apso in the features There's a lot of great information here to read about and see what is going on with angular and again going from version two up into the current version . Now we have five. It's a lot of back in changes. So unless they do something like they did with version one to Version two, which broke everything then going from 5 to 6 and 6 to 7. What you're learning now should apply to a lot of those future versions. Because even if this was angular for our angular three, there would be a lot you could still apply it, because again it was mostly back and changes. So the doc section is gonna be one of your friends. As Faras, the angular website is concerned where you can just learn Ah, whole bunch of information about how to put things together and again. They have these tutorials that you can go the plonker and try out angular applications, which you can see here. And let's just take a look at this real quick of what they're doing so you could see the APP component ts the model ts. So this is a very simple application, much simpler than ours. Well, let's go look in here. They're using a custom tag right there instead of Anapa route to render this angular right here. So this is the angular app. So for us, we're just gonna have an uproot. And then if we go into the module here, smooth some of this over, you could see a number of imports because maybe they're wanting to use certain things that bring that an And here's the overall class that they're calling the at Module. And I'm gonna close this file over here now, going into the component dot ts So this is that selector that was defying to kick off the angular application, and this can be changed. So if I were to change this to uproot, it's gonna break over here so you can see it doesn't really know what's going on. And let's go look in the index dot html All this doing now is just rendering html. So nothing special happening there. We change this toe, apurate here and change it over here, and you can see now things are starting to render back out. So back in our component dot ts, this name right here is a variable that they've defined. This is not a parameter to a function. So if I just break it down like that, it might look a little bit more normal. So it's a class, and this is a property of the class this variable called name, and they're just rendering out up here. So they're creating this template inside of here rather than doing like an app dot component dot html. They're putting that in here. So what does that look like if we do change it up? So inside of app, I am going to create a new file is called this app dot component dot html. All right, so there it is. Let's take their code that they have here and put it up here like that. Okay, so nothing is being affected. Angular doesn't even really know about app dot component that html at this point. So what we're going to do is replace this with ap component dot html and we're going to change the quotes. They had those back ticks on there, so we're just going to provide a little bit of path information. So I'm gonna actually jump into the full editor, so I'm gonna click up here. Where? Open your work in the plucker editor That's gonna bring us to this page. And that's just go back into this file so you'll notice we're not actually getting the content rendered out. So what is going on with that? Well, the problem is that we're still referencing template when we should be template u R l And when we do that, then we can see our name variable comes through that we have over here. So this name and you were evaluating this with two braces on each side. This name is the name that was defined right there. So that's just a simple example of the communication between the front end view and in the controllers here. Ah, but this right here is a very simple example cause this is app dot Component is available all over the application. So we're not making use of our own components like we will in the main application, meaning like in about ah, home or card or products where the communication is isolated for each of those components right here is just available class wide, so that would be ah difference And what we're going to see moving forward as things get really structured and we build out a larger application. But this just gives you an idea, though, of how the different components work together and how to do references as well. But are routing is gonna be more complex, too? Next, What we're going to look at are the tolls in the editor that we're going to be using for the course. 5. Tools and Code Editor: we're going to see the tools that were going to be using to make angular work locally on our machines. The first thing we're going to do is go get no Js. So what I'm gonna do is just type in node dot Js and actually want to do that down here in the search box. Okay, so at no Js dot org's is where you'll go to download note. So what you're gonna do here it is. Just click on this one here for the recommended users and install it. So right now, it's just identifying I have a Mac, So it's gonna install for a Mac Now notice kind of the foundational tool that we're gonna use for running or in your applications. And another tool we're going to use, which is the package manager is called in PM, and once you have knowed you can actually get in PM But if you want to download it just by itself, So I'm gonna type in downloading PM and here you have get in PM and you can click on also just to download. So if I click here, you can see what you can do for downloading it and a lot of it's just command line. So if you have it used the command line much in your Web workflow and this course we're going to use quite a bit of it because of in PM, But we're gonna really stay inside of our development tolls to get it, and I'll show you sharply how to check your version of No Js how to check your version of in PM to see once you have note installed. Um, you can then should better run this command here to get the MPM files on your computer. So one more tool we're going to use is called visual studio code. This is a free toll, and it works across different platforms. So if I go into here and you can see it's identifying my machine again, but this toll is really an enhanced text editor. It's not an I D E. It's not an integrated development environment like the full visual studio that you might be familiar with. So there's no compile elation that go on here, but it's a very powerful. It's got an integrated terminal that we can use to stay in sight of our development tool and run those commands wouldn't have to jump out to a command prompt. So we're going to see how to use this tool as we go through the course as well. I think you're gonna like a lot. Now, if you're using something like Adam or some of the other, more powerful text editors, those, we're gonna work just fine. Whatever you're comfortable with, this has become very popular against free. It works across different platforms. So this is the one that I will be using throughout the course. So what we're going to do next is go ahead and start creating the initial parts of our project will also see how, um, visual studio code works. We'll get our first introduction to using it. 6. Initializing A New Angular Project: with node and in PM installed, we can go ahead now and create our project. So what I have here is a folder called CART to and in this voter there's nothing in it. You can see I'm going to create our regular project and put it inside of this particular folder. So what I want to do to start the project is go ahead and tell angular the name of the project, and that's gonna be in G new. And I'm just gonna call it cart so I'll hit. Enter. That's gonna go ahead and create our project is gonna create another folder called Cart as well, so you can see here it's making use of in PM to get all that toe work. So once this is done from here, we're just gonna jump in the visual studio code and will stay there. OK, so that is completed. All these different photos have been created, which we're gonna take a look at shortly. What I want to do now is code space dot So they're in the installation of visual studio code. There's this option that you can integrate with Explorer or on a Mac with finder. That you can just type in the command line as well. This code space died, and that's going to jump you into visual studio code. So I am just going to go ahead and do that now and you can see we're inside visual studio code all Just expand that out. Okay, so now to get to our integrated terminal, I'm gonna go to a view, then integrated terminal. If I ls this you can see we have our cart folder, and I'm just going to change over into cart like that. And actually, I'm gonna back out of this because what I want to be is inside of this folder here because I don't want to have to open it up like that. So I'm going to get us a different view. All right, So now I'm gonna go into our court, actually, just cart and l s and then I'll do code space started, and you can see now we're inside of that cart. Photo all of our files air here. There's gonna bring up the integrated terminal once more. So if I open a source, this is where the files or that we're going to mostly be manipulating out here in the root . We've got our package, Jason, which identifies the dependencies that we have. You can see we're using Angular of five. So back up here. This is our index, that HTML And if I open app, we have just the app components in here as we create the about the product, the cart, all of those air gonna create their own folder with the four same corresponding file. So as we look at these for basically the shared portion of the site, you have this CSS nothing in there. You have this html coming out of app, which is kind of like our main HTML. Although index is a wrap around from there, you get into the component parts so kind of look at the hierarchy as index at html ap the related app dot components in module, and then you'll have your various single pages so we'll see how old that fits in shortly. All right, so this is what we'll see if we go ahead and try to run the site now, which we're going to do by running an n g serve. So I'm gonna let that go, and it's gonna tell us what port? Anything is running on. So, yes, I do have the demo site currently running, so we can go back and forth to the target site. So to get around this, we're gonna bong serve dash, dash port, and I'm gonna put it on 4400. So I let that go. And this time we have a girl here which you can copy, which I'm doing now. And then we'll go out and take a look at the site once everything here pre compiles. All right, so now we're gonna go out to this site and take a look at it. Here's our target site and we open up a new tab. Paste this in here and there we are. So this is our angular site. This is pulling that data out of the APP dot component tour of heroes, angular blog's. So we're gonna see this text when we go back in there. So going back into visual studio code, you can see we have a tour of heroes we have. Blawg did at the top. This is the image that was coming in. Title is coming out of the back end, so let's see how that works would go into this component dot ts, which stands for typescript. We can see our APP is getting a title here, the various components it's also relying on we'll go into our mind role which really helped separate out different component parts of the app section of this. So there's nothing in there because we haven't gotten really into it yet. We'll see how these air better utilize once you sort putting code into these files. And so back in our component that TSR typescript file, this is title. So this is that variable that the HTML was latching onto here. So to braces, we get title and if we go back over here, we can see that's app. That's where that came from. Now what we're going to do is create our about page and we'll see how to get into it. So for that, I'm gonna go ahead and stop the website and we can from the command line right here, there's gonna clear we can go ahead and create our about page. So I'm gonna do an N g. So notice all these commands for angular are starting with an N G. And I'm gonna do a G for generate. You can also spell generate out. It's just quicker this way. I'm gonna do a C for component again. You can spell component out, but these air just really quick and about I'll go ahead and run that now Anger is gonna do a few different things for us. You can see this folder structures getting created. So all the photo structure that we see here, the files that we see here or initially all put there by angular. So if I open up app and go into about you can see we have the same type of four files and if I click, we just have this little bit of HTML. I go into our component dot ts. We have in a net for this file right there. We're really not gonna be going into the spec, and then inside of the CSS, there's nothing there. So at least for us, the places we're going to go are mainly the HTML to build the layout for that particular page layout for the about in this case, the typescript, which is where we're gonna type in any kind of, Let's say, Java script. If it would have been Java script. This is kind of what we're doing. If we would have a JavaScript file for the about, this is where we would be. But instead, we have a typescript file. So similar concepts there in regards to how everything fits together, you can see here how we're getting access to these other dependencies. So let's now go ahead to start this server up again and take a look at the about page, which only had about works and right, I need to go back with our port number. So this is going to do those pre compiled nations which has taken the typescript and translating it for us so that it can be useful because the browsers don't understand typescript. They do understand Java script. So that's part of what's going on with that compile elation. Okay, so no about page right now, if we go to the target site, notice how these pages air getting reference. So if I go to the about, that's how it's getting reference. So I'm gonna actually copy this. Go over here, pace that there I need to slash and click about, and you know, it's what happens. We just end up on the same exact page. Really? What's going on behind the scenes? We need what's called routing. We don't have routing right now. That's why even though the pages there, we can actually get to it. So going back individual studio code, we're going to start building in this routing as well, coming up next so we can really start. Start looking at some of these pages that we have, especially this about page, so that would be what will be getting into next. 7. Adding routing to App: we have our initial project created, but at this point you can see that if I put in about to try and reach the about page and hit enter, we just come back to the same home page. So the problem is that we don't have any routing. That's what we're going toe work on now. So going back individual studio code, we're going to work right here in the APP DOT section of files. And working in this section with the routing means that route is going to be available for the entire application. So the 1st 1 we're going to go into is our module. So here's what we have right now, and we're going to do a few other of these kinds of imports to get different components from angular and then also the component parts that are gonna be associated with our other files that we're going to create. So, for example, we want to get the about dot component imported into here as well, so it's going up to the top. We have our browser module, which is really a helper module that's used by every browser, must be supported by every browser we have are in GI module. There's a few others that we're gonna bring in while we're in here so not directly related to routing. But we are going to need these different components. So we're gonna have a forms module, and that's gonna be coming out of and you can see how we're gonna be getting these This going to all go in single quotes, just going to come from forms. And what I'm gonna do is copy this cause we have a couple of more and just change them out . The next one is gonna be our http module. And actually now, with the latest angular, we're gonna use common 80 to be so that's going to help us with our request in our responses. Okay. And so the next thing we're going to get is called a hash location strategy. The way we're going to set that up is there's gonna be two components to this one. Have location strategy that's gonna come out of the common like that. This is going to help us with putting together of the URL parsing of the Earl just like the way that we have are about. So if we go and take a look over here with the hash tag and about So the slashes it's gonna help with taking that apart and making sure we reach the right pages. And I'm actually gonna remove common. See if that removes that underline. So there is a deprecation noting the angler documentation and actually goes with common. I think that might be, um, a difference with the betas that are coming in. So if you just look up the HDP module on the anger website, you can see some of that. So probably at least for now, that's not gonna be needed. But we're going to go ahead and forge ahead on this. So those air the modules we're going to use we're also gonna do an import for something called Routes. This is going to be our own, actually, and it's something we haven't created, but we will create soon, So this is gonna be called app dot router, and it is going to sit right here inside of these app dot files. So right below abduct module, for example. Now, because we don't have it, we'll get an error. So what I'm gonna do is just coming this out. So that way. I don't have to come back in here or forget that these are actually here. Then we have these components that were going to be importing, um, which we're gonna be. Our files are components to our different files that we're gonna have. So just like we have the about here, we're gonna follow the same pattern, Basically, is taking this component making it available at the root application level, which is where we are here. So I'm gonna copy this and paste in where we're gonna have products home cart and the sidebar. And so what I'm gonna do, we gonna have component after each one of these, and the next one is gonna be products, and then we're gonna have our home. We're gonna have the cart. I am gonna have sidebar. So over here we're just gonna follow through the same kind of naming conventions. This is products with an s, then just home and we have court. Then we have our sidebar. So again, these we're gonna throw airs because those components don't actually exist. I'm just gonna come in from out from for now. So once we have the about working, I'm just gonna drag this over a little bit. We can then start bringing in. Those other files are creating those other components. Okay, so that is our we need for imports. What we're gonna do now is fill out the rest of this N G modules. So what's going on here? We have declarations, which are the components we saw above. We've got an import that we're bringing in, which is part of what's going on with this. So this is importing basically the module out of the anger libraries. This is making them available to the Indy module is a component. So it's It's basically an application that helps divide dropped your angular application up into the different components. This right here is basically the route that we're working at. Then, as you get into the different files like the about, it's got its own components section to help isolated as well. Now, at least for this, I can't put them in because I can't really comment those out. But we have the app we have the about. That's gonna be enough to at least get going. What we need to start rendering the about page now right here for this import. We're not going to be dealing with our own component files that are not there yet. We're actually gonna import the ones we have above which are going to be forms. My jewel gonna have http module and what we can do or actually wanna wait, we're gonna have route right below this rather routes that we're bringing in. So we're going to create that file shortly, and then we about to bring that in. Then we do have the location strategy, which is gonna be a provider. So it's gonna go inside of this array, and I'm going to create a placeholder for it here. So the way this starts is with, they provide, they will have a comma. Whatever it is that we're doing with the provide, that's gonna be called an injection token. Then we're gonna have use class. I'm gonna have another colon. And then whatever the item is, the value there. So for this provide, we're gonna use locations strategy. So again, injection token is what that is called, and then we're going to have our hash location strategy. So what we're doing now is weaken basically, inject this hash location strategy into any class that's created which we're gonna have several of them, particularly the files that we're gonna be creating. So basically, it's injectable everywhere inside the application. When we're doing it at this route level that we're doing it here. So the rest of this looks good. We're going to leave it alone, and we're going to move on to some of the other routing files that we need to create. And one of those is going to be our APP router, which we don't have, and we can at this point, go ahead and bring this end will come and check. Take a look at that in a little bit and put that in there. So that's our routes that we have there. This is gonna break. You can see we're getting a lot of red down there and what I'm gonna do, click on APP and create a new file that's going to be app dot router dot ts. So there it is, right below their Okay, So we are in our next lesson going to fill in this router file. After that, we're going to add some more routing into our app dot module dot ts as well 8. Completing Routing Functionality: we left off completing our module part of this for a routing so we can see in here we have a number of things and in regards to particularly routing, what we're going to do is create our router. Here are routes that we're calling it, and that's going to you can see how we're calling. This is just router, whereas down here we have about dot components. So we're just getting right at the router part of this file, which is our app dot router dot ts. So in this file, what we're going to do is basically say, if you enter in this u r l You go to this component so we're tying that together. This module here basically laid the foundation to bring in the necessary components, which we will have shortly Once we create those files. This one here is kind of time the URL to those components. So a couple of things were going to import at the top are some components we're gonna need for this to process. So this actually gives use at the bottom of the file this module with providers. So I will describe that a little when we get down there and that is gonna come out of the angular core. And then we're going to have a routes comma router module, which is gonna come from angular router. So at angular router. So basically, we have the service and it's not part of core, so it comes out of this router library. Now, we're going to do some imports thes air, the imports that we saw earlier, so we can go over here and get them. We need everything except app component. So I'm gonna grab these and just paste them here. So the only one right now is the about basically. And once we get these other files coming in, we can go ahead and remove our comments. So we're going to do an export now and create a constant called router. So the export is making this right here available are viewable publicly, so other parts of the application could now see it. So what we're doing is creating a ray for our routes, and we're going to create its entry with these braces and separated by a comma. So we're gonna have one for each of our pages, the way it's going to start off with this path, this is going to be the empty or the default, which we're going to say redirect to. And we're going to have another colon that's going to go to the home component and what we're doing is a path match as well on full and the reason that's happening. And this needs to actually be a colon because this could be empty. So it's the default redirects toe home on a full match of whatever is the URL, which is gonna be empty, basically. So now we're going to do a path to our products page. We have a component that is products which is going to be represented here. So the first part of this is we can do pound slash products in the URL, just like we did with our about sofa. Go back over here. You can see what's happening with that pound. Slash about and we'll see that one once we drop it in. So we have Here are products component, and actually, it's probably better just to copy home from here because I know what they are. But I'm going to add all these in once we actually have them, because if I try to do it now they're just going to fell so I can go with our about at this point, I'm going to grab the about and just replaced that here and that. I need my cynical in and what we're also going to do is another export making this available publicly and we're gonna call this routes. So here's our module with providers, which is going to be getting assigned to function out of router mind. Whoa! And I'm gonna do a four route which gets at this is basically ah, helper function that gets at the root of this right here, which is a rapper, meaning it's a rapper method. And we're calling for route, which is a utility. So we're basically registering at the root of our application. And what we're registering is what we just created. That array called routers, making it available everywhere. Okay, so that completes this fall will have to remember to come back to these files into a NCAA meant these other components once they're available. And now, for the final part of this in regards surrounding in particular, is to go into our component dot ts and in here we're going to create a dictionary with the page titles and the girl part of this, which is gonna be the pound slash about and then that's gonna help insure that the routing is complete. So you'll see the CO We're gonna adhering to make a lot more sense that what is going to do is basically pick apart the URL. It will have the component name, which is gonna be used here to send it to this component. And so let's go ahead and start with this. So we have the code up here, which is the initial code that was created forests and in our export class, where we have this app component, we're going to remove app and we're going to start creating some of our own code. So we have your l which is gonna be blank for now. We're gonna have list items of type any. Okay, so what we want to do now is create a constructor. You can see this is a class like any class. There is a constructor that where we're going to do the constructor is like this. And then in our constructor, we go ahead and a sign list items is going to hold our dictionary of items or pages in this case. So the 1st 1 we're going to have his home will have a comma, a link, and it's separated by a semi colon, as you can see. And I'll just keep those very close will have pound home, which is valid for home. And actually, when I want to do is surround this in embraces. That's why it's probably complaining and put a common there because we're gonna have more. And I'll just move that over and copy. So we're gonna have products next. And then we're going to pay stand cart and we'll have about and that's all we need inside of that irradiate Remove this last comma and save so down here, right below this bracket, we're going to also do an ad to add these. This is gonna be a function that we're adding into here, So these parameters title and euro as they come in, we're going to check them. So title not equal to empty and double ampersand u r l not equal to empty as well. We're going to have euro equals http and then we're going to append your L so plus your l. So that builds a valid U R L forests based on whatever these items appear might be. And then we're going to take our list items and push will push the name, the title and the euro. So the name is gonna be title will have link, which is euro. And finally we're gonna have a flag for is new is true And and down here we can go ahead and close it off with a semi colon and re initialize these and you're all like that. So this builds up that your l Based on what it could be right here inside of this array of where everything kind of starts with the girls or will we have contained the Urals or using that format there? So then once we have something in the euro like we have the about in the URL, then we can take the about which is gonna be here, send it to the right component. So just to figure out what this is down here because we pretty much have the routing that we need, we should be able to take a look at our about page and see what's going on over there. Okay, so our app dot router or dot app router. Let's see here, so app dot runner dot ts is correct. And this right here should be a diet. Um, because we are just following again, just like we did hear the same kind of syntax. So I say that looks like it's re compiling. And there we go. Let's go take a look now at the site and see what happens if we go to our about and we're still in the home page. So what we need for that to render is to go into the about into the HTML down here, right below everything so we can see it. For now, we're gonna put a new town called Router Outlet just like that. And then we'll go take a look and notice down here about works. And if we go and look at our about and the HTML, that's all we have right now. So now we finally have the about page rendering. And if we go to the home page like this, you can see the about is not there no more. So it's actually getting us to the right page or home, which was valid more back to home about is not there either. But like this it is. Obviously we don't want this here we go to the about page, but that's okay. We're going to fix that as we work through the project. But at this point, you can see now the routings in place. It's starting toe work. What we want to do is go ahead and create our other pages. That way we can remove those comments inside of our routing. And perhaps we can even then see these other pages come through just like this one does down here at the bottom. So this is kind of the beginnings of our routing. And once we have that in place, we can begin moving into some of the layout for the site and the other functionality that we want. Like having items appear in the cart 9. Module 1 Summary: I like to just summarize what we've covered in this introduction to angular module. So we took a look at our target project that we're going to be building out. We kind of got an overview of angular, the layout of it, how files are laid out and as well, we took a look at the tools and the code editor. Visual studio code is what we're using. And then we got into creating a simple application. So how to initialize it? We had to build in our routing into the air ap dot module dot ts. It kind of got a little bit elaborate. So we had another lesson that we got into just completing that routing and was seeing the functionality come in and starting to get an understanding of how it works in a simple scenario, because once we get into the real application, the shopping cart, things get a little bit more complex. So that was a summary of this module 10. Module 2 Introduction: I'm going to give you an overview of what's going to happen in our building, the project module. So this is kind of the crux of the course, But we get into building out our shopping cart, so the first thing we're going to start with is the about page layout. And this is going to include using Twitter bootstrap to lay that out and then we're gonna bring our content. And now we've got a page and we can actually see that working in the website. Then we start getting into the overall main layout of the website. So the navigation sidebar footer and to start laying out a template for the main site. And then now we can work on the home page, which does include a bootstrap carousel, and we're gonna turn on our routing. This allows us to go to the home page, the about page and other pages. Also from there, we want to create our products page, probably one of the more complex pages that we have, because there's dynamic display of products that we have to build into that page and ensure the layout works. So for the dynamic products, we have the back end where the products are getting stored in a Jason format. And then we bring those into, ah, loop that we're creating on the view and display our products. We're going to see that there's some differences with what the target site has, which is, I believe, in Alfa of Bootstrapping Alfa version of Bootstrap four versus where we're at in the course , which is bootstrap four beta, too. So it's moved up. It's a newer version, and there's a little bit of difference. Is not anything really breaking changes? Kind of differences. That's what the Alfa does. It will break changes, but the beta, uh, tends to upgrade a little bit more gracefully. But there are some differences that we're going to see, and then we get into the back and functionality and styling for the product page so a little bit more better back in. This includes some of the clicks that we have on the view to go to the shopping cart, for example, adding items to a cart and in general, stalling a few final touches. There we have are separate CSS file that we're gonna put all our stalling into for each section so they about the home, the court, they all have their own CSS. Then there is CSS for the overall website as well. That's where you have the app dot some names, some file names, so app dot component ts or in app DOT module, for example, are all the main site files that will affect the entire site. Then we get to our cart so we can actually see items start going into it. And again, there's a little bit differences we're going to see between the older version of Bootstrap and debated two version, we get into our car controller where we're handling the calculation of the totals, incriminating items recalculating the total. Because of that, we're gonna see an issue whenever we remove all of our items, and then we're not able to actually add anything back into the cart. So some subtleties as we get into the type scripting or the java scripting part of the cart controllers of the back end and see why some things are not working and resolve those. So it's gonna help with figuring out how to debug an angular project. And then finally, there's some court stalling that we're going to do to make everything look right. So that is what we're going to be covering in this module. Let's go ahead and get started. 11. Completing About Page Layout: we left off with getting our about page content to come through, which we can see down here. So what we're going to do now is build out the content for the about page completely, and we're also going to add in the other pages were going toe work on our index that HTML and our home page. So the reason that we're seeing this content right here the welcome to the tour of Heroes is because it's in our index dot html. That content is always gonna be visible cause it's basically the main template layout for the entire website. So you're always hitting the index that HTML in other words, So if we had home, are if we had card or some of these other pages. So, for example, if we were to go there, we would still see this content. So what we're going to do is start modifying the index that HTML. So it becomes the layout and will always see the layout. But this content here goes away, so our side bore will come in this area over here, be the main content section will have our navigation. So that's what we're going to be building towards in the site will slowly start shaping up into the target. Look, which is this? Look here. So we're going to add this content here now and our other pages as well. We're actually gonna go ahead and add those pages first. Or are those components. If you want to use the angular terminology, then we're gonna come back and start working on the about. So let's go into visual studio code, and we can now go to our about dot html. So over here, we're gonna go ahead and fill this content in. All right, So what we're going to do now, I'm gonna go ahead and stop the website so we can add are other pages. So I'm just gonna do a clear and we're going to start by adding the home page someone to an n g generate component home, and I'll let that go ahead and create. All right. So if we go and look now we have the components for the home page. We're going to go ahead now with cart, and then we'll do products, and then we'll finally do sidebar. And so that completes all over pages. So what? We're going to do is work on this content right here inside of the about this, the HTML that's what's actually going to render think of is the view. So we're going to be following Bootstrapped four layout, So we're gonna have a class that's going to equal the container. We're also gonna mark this as row and in here will have an H one with our title so about and it's all we need there we have a horizontal line that we saw from the target. Now we're going to start creating our columns. So this is the main content area. The way we're going to do this is some of our own CSS, and then we're going to make use of some angular CSS. But we're gonna have one column, 10 columns, one column. So that's 12. So again, we're following angular conventions to create thes. So this is going to be about container, and that's gonna be the only CSS will have in here, in fact, and we'll add that shortly in our CSS file, so they will go with our row and we're gonna go with container. So we're basically designating our rose inside of the same class with our container. And here's where we start creating these columns. So we're going to start by target in the medium. This is our 1st 1 and it's gonna be an empty column, and I'm gonna create tomb or the last one is going to stay empty and we're gonna have this one is 10. So, again, that gets us to our 12 columns, and I just break this up. So in here, we can add about us inside oven h three, and then we're gonna have those paragraphs that we saw. So this 1st 1 here and I'm going to again use some of the, um, it short code. So that is a P Times one. And I'm gonna do Laura, um, and just tab. So there we go. Then we're going to do, um, how we work. And we can just go down. I'm gonna create these titles, and just by copying them, then I'll come back and pasty and the paragraph tags. So how we work and we have several of these two create. So the next one here is just going to be contact us will have privacy policy. All right. And then we're going to take these paragraphs and put them below each of these sections like that. And the last one actually had two paragraphs. It doesn't matter. It's not a big deal. But I am going to say this now. So let's just go take a look at what we have on the website. So going over here. And actually we need to start that. And I am going to add in the CSS after we start this. So let's just go ahead and start the server and we'll take a look. I'm gonna get back. Oh, import 4400. But the pre compile elation is complete. Okay, so that should be rendering At this point, here we are and there's our about. So obviously the layout has to come into play here. And once we add the boot shop for Lincoln, that will happen. Okay, so going into our CSS, we have a little bit of CSS. There's just the one class, so that is going to be about container. And what we're doing is just setting some padding on the top so that we're not butting right up against the navigation, for example, and we're going to set that in PX, um, and you're a big shot for is ah, lot of it focused on realms instead of pixels. But some of the layout components versus the funds still use pixels. Um, and the funds you'll find you're using a lot of room. So I'm gonna close that. I'm gonna close this because we're kind of done with those and just going back over here. If we take a look, only about we can see some of the impact of our stalling. So let's see, we have right here and there's our 20 picks old, so you can see how that's working, all right? And I'm just going to leave that open for now and go back over here. We're going to now address the index that HTML which is this. So there's not much there and going back into APP component. We don't want all of this code in here, but we're going to We're gonna take that out eventually. After we complete this index dot html. So what? We want to hear the references to, um, bootstrap, and I'm just going to paste those in because you can get the citians from get bootstrap, the website. All right, And so where we want those is going to be right under our title runner, this base h ref, and save that. And for the rest of this, there's not actually much in there. We can just type in static Web ap if we want. And so let's go take a look. Now you can see some of the bootstrap is coming in a lot of difference here in the look of this and what we're going to do, I'm gonna close the index that HTML cause that's really all we need in there. So we're going to focus on this page here, and it's all gonna be different. So this is kind of acting like a so right now, we don't need any of this content. We want our router outlets, but we're going to, ah, place those in a different area. So what I'm gonna do is just start on this and then we're gonna continue in our next lesson . So following bootstrapped, we have a row inside the road. We have columns and the way we're going to do this, this is the site border. So it is going to get all of the columns and I'm going to column going to target our medium . This is gonna be 12. All right, so we're going to create another row for the main section, and that is gonna be a class equals row, and we're going to divide this up into two columns and 12. So this 1st 1 here is gonna be our to, and I'm gonna copy this. The next one is going to be our 12. Let's see. Bring that back and do that. And sorry, this is actually gonna be 10. So now we have our 12 and ends. Here is where we're going to put our router outlet. So this is where the main content is going to render out for each respective page. So what we have to do now is finish the build out in this main section. I'm gonna finish the sidebar. Let's take a look now at the site. So this is looking a little bit more like the real site, at least in regards to the main area. And so you can see there. The home page has nothing on it, obviously, but looking at that, looking at this, starting to shape up a little bit. So we're going to build this out in our next lesson, this at main component, and that's gonna have the main layout of the site working at that point. 12. Home Page Layout: wouldn't continue with their app component at this point. So let's see, we're gonna look at I'm gonna start closing some of these router components. We're gonna look at the out component html and the index that HTML so you could see the index that html is really gonna be a container for the app component dot html. So what is the difference? Well, this right here is what the Web server is going to see when someone hits the website. So abc dot com it's going to serve up the index that html just like any other website would . And from there it's going to call the app component that HTML, which contains our layout. So those two are gonna work in conjunction all the time. So we have the bare bones inside of the index that HTML, which is where our links are. We don't really need to put them in the app component because it's going to just contain layout. This right here doesn't really contain any layout. Again, it's just a front facing piece of the website as the default Web page. Then it pulls in this right here, which is where we're creating our layout So let's go ahead and continue with the side bore up here at the top and we're going to create the navigation. So making use of HTML five semantic tags and then we're going into bootstrap for So what we're going to start with is the route for the nab or which is nab, Or then what are the customization is we wanted to have And those are gonna be now border we're gonna have tolerable, which still targets a medium They were gonna have nab or light, and we'll see the effects of the shortly. We'll have background as faded. Okay, so there we go. We need to add a few more things inside of here. So we're gonna start with the DIV. That's going to have again nab. Or but now we're getting into the sub components. So it's now bore knave. Then we're gonna have margin right as auto and we'll see once we get out into the browser how these different classes air affecting the look of everything on Let's see this right here. We want to be a u l. And I'm gonna add another div above it shortly. But let's continue with our own ordered list. So this class here is gonna be a knave item. It's going to be the act of one. And what we're going to do is create a link. So in here, we're still gonna have knave items. This is a now the link going to home. So we have home and then we're going to do space span. And this is just for our current, and what we're going to do is class. I want me by Current is, we're using this class. Here s our only screen reader only it's a boot shop for class and we're going to say current so that they'll know because depending on the screen readers, it's probably not gonna be able to detect active. So we're just gonna add this in here? We're not actually going to see that, though. And then what we want blow now is another div. This gonna handle the collapsing and expanding of the class. So we're going to do a collapse class which is gonna be now bore dash collapse again, the particular kind of styling of that one that we want. So I'll take this, which goes below the UL so here that you l didn't have a chance to close. Let's see if it's lingering anywhere. It doesn't look like it. And then I'm going to put this here and it over. So I'll take this and push it over for just a little bit better. Formatting we have are now of and that should highlight this knave. Let's see or do that is highlighting that defy Dont know why thats not highlighting the now . That could be something is out of order. I'm gonna roll this up because I know the an ordered list looks fine. This div looks fine. So there you can see the problem. I am going to remove one of these like that now if I click now, you can see it's highlighting now. So it's saying, Yeah, everything's in order at this point. I'm gonna open this again. That is an order that you else in order. So we're looking good. It can take that space out, at least on the navigation. Now we're going to build out the main content section down here that's going to go inside of our column too. So we're just going to start with, um, we can put some be ours and here the original does or weaken Just work with padding. So looking over here, what I mean by those be ours is right here. Um, so that's how they're creating that gap. Well, just follow that for now. Do some be ours like this, and there's actually three of them, and then we get into our div, which is gonna be class custom sidebar. So there's going to be one of ours, and they were gonna have div. And what we're getting into now is some angular looping because we're gonna loop through those items inside of that sideboard. Let's look again where we are here. So we're creating these items here, and those items are actually gonna be fed to us. So that's why we're looping through them. So to create this loop going into a star in G four. So if you're familiar with these four constructs, that follows something very similar. So we have the variable per iteration and in the list that's coming out of which we have it done anything with yet, But we will shortly and then we're gonna have an H ref that's going to have a variable. So to braces, it's going to be item dot link. So now we're accessing these. These items are accessing different properties on them and we're also now going to go back with a star in G if because we need to evaluate this is actually a capital I f. By the way, these are called structural directives with this ass trick that is in front of them are stars in front of them. So basically, what it means is that they're going to expand out HTML. They're gonna mitt html once they render inside the browser. So to complete the evaluation, we said unequal and then inside of quotes is where we're doing the evaluation. This is gonna be owner are item that we're iterating through. So we have a property of is new and we want to check. Is it equal to true? And then we're going to access the name of the item and save, and we have one more of these below here, so we're gonna have is item leak. We're gonna have our target just gonna remove some of this, which is going to equal blank. So we'll open those in a new page. We'll have again another N g if and that is going to equal item died is new equals true. And we're going to do our item dot name and close off the braces and save that. So all this is doing is a little bit of restructuring to how the link is laid out. The H ref here and you get one or the other of these, not both of them. And if you're wondering, here we have two equals here we have three equals, but also notice we're making use of the bang, which is negating so if not equal to true. But looking at the three equals down here. This is really going back to Java script. So if you have to a quality comparisons that the bank was not here is just two equals. Then it just checks for equality. So it does what you would think it doing would do in javascript. But what some people may not be as familiar with is three equals, which checks for quality and also type. So let's see, for example, if you had zero equals zero in Java script, then that's going to be true because you're just checking for quality. Then if he had zero equals with three equals the same thing, then that's gonna be false because they are a different types. You have the quality check, which is gonna be true. But then you have an integer and a string those air different types because we are checking tight. So you get the false there. So that's what that means. Okay, so now we're going to go ahead and move down a little bit here, right below our Dev, and we're going to put in a church or and this is that form on the sideboard or so right there is what we're targeting now and we're going to add a div with the class. That's going to be ad component container. We're gonna have some input controls. These are gonna be form control those air coming out of anger and type on both. They're gonna be text, and then what? We're going to reference inside of a bracket. Parentheses is N G model. So there are some things on the back in that we have to do for this reference, and that is going to get title. We're going to just do a place holder that's going to equal tape title and close. So this right here, this in text right here, which we're seeing for the first time, is, of course, different from what we have up here, which is just the rendering of the variables. So if we had just these brackets, it would be called one way binding. What that means is the model which we're going to take a look at in our next lesson would be pushing data into the view, but we're using to a binding with these parentheses inside the brackets. Which means not only can we push from the model to the view, but the view can push back into the model. So that's what that means. We're going to go both ways with that. Okay, so I'm going to copy this if I can get it to copy. Let's see a keep eating the site over there. Noticed this up here, which is just really ah, map of what you have on the current page. So I'm just gonna get to the end of this line and paste this in here, and this one is gonna be the same we're gonna have. You are all in this case, and we're just gonna tight you are. L and Weaken. Do like www dot Google Just to say that we don't need http and then we are going to below this at another div with they class column MD And this is going to be what's called a nested column because you notice we have are two. We have our 10 down here. So these are the outside columns then in here were nesting. We have 10 never going to create an all set again targeted medium of one. So then you might be saying, Well, this is only 12. I mean, this is only 11. We should have 12. The all set is multiplied times two. So one times two is two and then plus 10 we get our 12 and in here is going to be that blue button. So we want the root identified as a button. Whatever the type is we're using primary. It's going to create that blue, and we want a block. And now we're going to target the click event. And that is done in parentheses. You can see we have a method called ad. We're gonna have to add that in there as well. Close it we're gonna do ad link and save. Okay, so we have three. Does that closes out? Let's go. Look, now see where we are so going to our site and we are on about. But we're getting an error unless he can't buying in F. If so, that is a typo right there and let's go back. And we can fix that real quick. And let's see, we are Here's RMG If this should be an ngf, say that and you notice that wasn't caught in the pre compile elation. So the browser is gonna catch it. Now if you go back and I see I'm getting two rows here, look, the console. See what is missing here. So missing. Expected Prentice E on the ad. Right? So it looks like there's no closing parentheses on the ad and that is here. Just add that there. Now we'll check, see if for any closer. All right, so this is looking pretty good. If we look over here, you can see pretty close. We're missing our ah CSS, of course. So we're going to add that's that's coming in our next lesson as well as starting to build out the home page 13. Home Page & Carousel Layout: At this point, we're going to bring in our CSS to help style up this main template layout, which is in our app component. So we're gonna go back into visual studio code and one of the thing I have all the assets in here now. So if we look in the asset folder, there's the different items and you can see there are transparent so they'll show up is white with the actual item coming through is black, which will be easy to see. Okay, So, inside of our app component that CSS, we have three different classes that we're going to add. The 1st 1 is gonna be our custom sidebar. What we want to do is some padding all around, which is gonna be 10 pixels, so it's going to get it off of the edge. We also have our it's gonna be a die ad dash component container input. And if we look for this, so I'm gonna copy it, go back into our HTML, and I'm gonna do ah, command F to bring up the find and you can see here is where this is and we're targeting these input classes. So the hierarchy down here inside of input. And if I hover over this, we can see the HTML that's out putting. So it will get at what we're after, which is that input tag. So in here gonna get a with of 100%. And we're also going to do our margin of 10 pixels and in the final class in here is going to be the ad container again. But this time we're targeting a Dev like that, and we're doing a margin top, which is 10 p x and safe. So let's go take a look at this now so you can see we're not against the edge anymore. And if I right click weaken, go do an inspect just going to see the impact. Some of this is having also noticed the kind of, uh, html that's getting omitted here from our four loop. If I expand, these are all gonna follow the same thing. And the actual anger is that's not being used, is getting commented out. Now, here's our ad component container. This is the one that was targeting the input tags. You can see them here. And if we look over here, let's see if we can find add component. Actually, it would be against here, so I had the input clicked. And so here's some of that right here. If I click on these so you could see some of the difference is this with right here is already 100% were just ensuring that it is going to be there. So that just gives you an idea of what that little bit of CSS we have is doing. And we have customs side bore, which is here. And the only thing we did there was the 10 p x. You can see it right here, which got us off the edge so you can see the effect that's having their. Now we can start adding code into our home dot component html and associated CSS. So let's go back there and I'm gonna close these so we'll go into our home open up the CSS in the html no insight of I'm gonna remove this find inside of the home and the about we're not actually doing anything in the typescript files. There's no back in processing. It's all just lay out. So that's why we're not having to go into this typescript for those components, but on products we will because it's going to pull all of the products from a file and display them. So we're gonna have to do a little processing there. Okay, so I'm gonna remove this, and we're going to start with the container, and we're also going to do a row. So you notice there's a couple of ways to do that before we could do row here or you could just separated out into another def. And this is going to get auto columns. So we're not actually specifying them, cause all we have appears home. So we have two days, we're gonna put an H or two separate, and now we're going to start the next section of this, which is going to be where that carousel is. So we're going to have a row and started columns they're going to span all the way across, which means we're going to use our column medium on 12. So we'll have a deal with an I D that we can target, and we'll call it care cell example indicators, and then we'll have a class. And and like most things in sight of bootstrap, we start with the root class for whatever this is. So this is a care. So then any kind of attributes to customize it. So it's a slide. We're going to do a column m d 12 and then we have data. Right now. These data attributes you're gonna sees these as we build layout in side of the website, these air html five attributes data dash followed by some kind of specific name. So, according to whatever the spec is that's coming from so it just depends on where it's coming from. This come from bootstrap. So for whatever reason, that's what they're using. An inside of data ride. We're gonna have carousel, so it just helps the carousel function basically. Okay, So now we are going to create another day if we're gonna keep building out the carousel, which has different components. So now we get into care, cell, inner, and then we get into carousel items. Carousel captions. So right now, this still is going to be care so inner. So we're going to create that and we're gonna have a role as well, which is gonna be list box and roll is again. Area attributes. So for screen readers and accessibility. Now we have another day. If this is going to be for our carousel item, I'm just gonna copy this, paste it here and do dash item. So this is one of the visible items that actually display. And we're gonna make this one actually active and close that. Okay, so now we build this item. We have, of course, an image which is gonna have a class type of image fluid coming out of bootstrap. But we're actually into a little bit of customization on that as well. Then we have our source for the image, which is gonna come from assets. Want to do noun underscore 11819 dot p and G, and we can do it all. Just call it first slide and close. Then we're gonna have our caption. So it's gonna be class. They make this pretty simple. So we just follow again with Carousel Dash something which is gonna be caption and And the caption we're gonna put in 83 and woods to large variety of coffee products and misspell that. Okay, so these carousel items, we're gonna have three of them, So they're just gonna spin through, You'll notice there static. So we're defining the three. They're not just coming out of something dynamically. So that's just part of the way the carousel works for At least it's gonna work for us. Then we have a button below this. So we're going to do class button and the type is going to be a primaries is gonna give us a blue button. We also will handle a click, which is going to send it to the products. So that is a function that's going to trigger. And we're gonna do view products, say that and we're gonna add this is gonna actually go into our home components dot ts file . But what we want to do now that we have a carousel item, is go ahead and add these other items. So let's just see we're closing right there. We can roll that up and actually copy it so that we can make our other care so items and I am gonna go ahead and paste three times. Okay, so we don't have active on these other two. It's gonna roll that out, but we can go ahead and start doing a few small changes, so have second will have third will have some different images. So this right here is going to be 94 to 609 and the last one's gonna be a 9432 to 0. And then we're gonna make a few changes on our class here with the image. So what we're going to do is a D block right before image fluid on both of these and D Block is basically a display property for block style. So make it behave like a div, in other words, and then there's a few other changes we're gonna make on our captions. So we're gonna do a D nine. So we're gonna taking away the div display block attributes, and we're gonna set this on a break point for our mediums. So gonna bring this down here into this caption and save that. Okay, so let's take a look now on, just to make sure the websites kind of tracking along. So we need toe. Go ahead, remove our routing there so we can get to home, and then we'll take a look at that. We also will add Ian, our function that we've created for view products into our home component, so we should be able to see get to the point that we could see the care so in the next lesson will also add in this function here as well. 14. Turning On Routing: we're going to now start working on our navigation. And if I go over here and start clicking on some of our links, you'll notice we're not able to navigate anywhere. And this is part of what is going on in our app dot router file. So let's go back individual studio code and take a look at that. So here we are. You can see we had come into town a few other items here for a routing. So what we're going to do is bring these back in and we're not quite complete at that point . So now these files air there, we can go ahead and do the imports to not get errors on our imports. And there's some more code that we need to add down here inside of these routes inside of this array that we're building out. So I am going to start adding those now and their best going to be the remaining components , and I'm gonna copy because they're gonna follow a similar pattern as to what we have with about So we have our products and that is just going to be products component that we have a home component cart component. So they're they're gonna follow that same pattern and we'll do home here. We can have home component. We have court, and that is cart component. Then we have our side bore are actually side bar component. And then over here, it's one word sidebar saved that. And now if you go back to our browser, everything is refreshed. So we should be able to start clicking around. You can see that in fact does work. And if we go to our HTML file, we were looking at this method we have attached to the click view components are view products. So basically, we want that to trigger here, and we're just attaching it and using a method so we can kind of see how that would implement. Then we're inside of our home. So what we don't want to do is implement it into the typescript. Now, this is going to go in on a nit where we're going to define this method, and we're going to create just outside of our n g on and it so it's gonna be view products just like we defined it, and what we're going to get is basically a router So we're gonna add in an import for that so we don't get any kind of errors when they even get a little bit of, uh hence as we're typing. So this is what we need to adhere. Active Route router. And it's gonna come out of angular router and we need some single quotes. Fix the errors. There we go. Say that and let's see here. It's not activated. It's activated with the D. Okay, so now what we're going to do is go ahead and make sure whenever the user clicks, they can actually go there. And this could be done with this dot router dot navigate, which has a set of parameters, and we're going to supply basically an array with one item. So brackets single quotes in here products and say that, so we're not quite there yet. We are getting these errors because we're referencing router and it doesn't really know it . And we have this this on it, which is saying we're kind of in this local space here, but that's not really defying there. So we need to do is create a variable for it and thats gonna go in our constructor. We're passing it in to our constructor. It's gonna be a private router. So now there's router. And then here's where import comes in useful up here so that everything ties together. So once we're ready, we should be able to begin testing that code. So we know on the home page, we just saw a little bit of that earlier. We click. We don't have anything coming through. We just have first slide. So let's go back over here and see where that is coming from. So right here. So what we need is arrested this carousel to start coming through, which is what we're going to work on now. So one thing is kind of minor here with the assets. So we have the file names here by looking assets, these all in and CC. So that's one thing that we can change and it's just a nun Durst, scorer CC. And I am gonna put that on each of the images that are getting used so that they will be valid. Okay, so we have three slides there and let's go take a look. So here we are. We can see as well we have our button down here. The only problem, though, is that we're not getting the rotation of this. So the fix, that problem, we're gonna go back into visual studio code and we're going to add, um, a little bit of J. Corey to make this sliding occur about every two seconds. So we're going to create a variable appear at the top, which is basically for J Query, and we're going to give it an anne and then down here inside of this NJ and knit is where we're actually going to do that. So J. Coury, we're gonna pass our carousel tag and and we're just going to do a diet care So which you can see here. We're getting a hint for And then and here's where we're going to set the interval and we'll just do Ah, two second interval. So 2000 on that We don't need a cynical in there. We'll save this. Now let's go back and say the site should be There it is. So now we're getting our rotation and you can see our titles were coming through. So we have a little bit CSS that we're gonna put I want to hear eyes for our buttons and for our titles as well. We can actually go ahead and start with that. And that particular code is gonna go in our home component, CSS. So we're going to deliberate modification on image fluid, which comes out of bootstrap just to bring down sizing on those rotating images. Gonna do a max with and is going to 75%. Then we're also going to do a little bit of fixing on the carousel captions. So you probably noticed those air bleeding into the actual image here. We're going to set a position for inherent make sure we just get what is their and our color. We're going to do this gray color and then finally text align, we want to center. So minor updates. Let's go take a look. Now it's gonna refresh, sit and get some rotation coming in. And I might actually be a little bit small on the text for the carousel slow, which is here we take a look. So there it is. Yeah, you can see it's kind of coming in, so we'll have to do a little bit more adjusting to get that right, and you could see carousel caption. So that's should be ours. Let's make sure And to go back and take a look. So here's carousel caption and think that is spelled wrong right there. Save that. Now. Let's see. Okay, so, yeah, that is off a bit. Um over. Here's where we are. So this is our US right here. So there's a little bit of adjusting that can be done on that positioning right there. Okay, It looks like the rotating stop there. I was gonna actually just disable it in the code. Let's see, text The line does not seem to be having too much effect. Yeah, I'm gonna disable the rotating just for temporarily so we can just put something like believe. Zero seconds. Okay. And we're going to do something with the positioning of this. So one thing we can do is leave the positioning as it is, so that we don't have it there. And if we look at our elements, So this deal right here and here's our image. It's not appearing below the images. One problem. So where everything is inside of this tive, which is the carousel item, then the image. But we're not appearing below the image with that death, some of that is gonna be coming from the carousel. Caption. You can see it's got a position absolute. We should be getting our position inherent, so removed, the absolute there and the inherent here you can see so that we without the position in there, it's starting to actually shape up. So if we look at where the images ending were under it now we're just not quite online. Probably what we want is to do a instead of a center alignment, weaken, do a left and we can do patting. At that point, eso we don't have left patting, but we would probably want that. So in here we can add stalling to this. So we're just testing now to see where we would want to go and we'll do. Padding left with 20 p. X and that looks a lot better. And probably 25 is even better like that. And then down here, what we don't want is position to start doing anything. Let's see if we're inside of our image. Ah, no, Worst were under its Our position inherent would actually work. But our Dev right here is then pushed over a bit and so scrolling down, just trying to see where that might be coming from. I think right there on this left rz indexes. Fine. So if we take this, change it to a 5% leave the position inherent, then it starts looking pretty good. So we're gonna take left and change it to a 5% over here. Go back into our CSS. All right, So now we take a look. We want to also, with that text online, I think we still need are left so we can change that as well. Okay, so let's bring back the rotation, and we'll just go through these and see what they look like. Down here We were. Let's go with 1500 this time. Women this So sometimes, for whatever reason, it takes a little bit for it to kick off on the carousel. There we go. So now we're looking pretty good. I think we've got our alignment in place. Um, because everything right now is not running into each other. The button is standing out pretty good. So the carousel at this point, we can pretty much claim is done and what we can start doing is moving on to, for example, the products page. So there again, this one is looking good, and that's what we're going to get into in our next lesson. 15. Creating The Products Page: religion and start building out the product section of the website, and that's going to start with our HTML file products dot component dot html. We're gonna build in our columns, and this is going to be made up of basically a two column in a 10 column. So we're going to go ahead and start with a class container, and we're gonna put our row in here is well, and then we're going to have products in one column. So if we take a look at the target site, um, go to products is gonna close this. We have this right here, which is gonna make up basically a two column section. So that's what this first part is going to be. So we'll have a class we're going to target. Ah, the medium and two. Then an H one will put our products. And then just below this, we can go ahead and start with our 10 column. At this point, that's also going to be medium, and we have few other items here, so we're going to add in a class for custom products. We're gonna do a bit of stalling on this, and that's gonna actually be one big one. So custom products cart container and that will close that one off. Now we're doing a nested column here. This is going to be an all set medium eight, and we'll close that off. So in here, we're building out the navigation. And so for you. Look up here. This is what we're working on up in this area. So the next part of this, we're going to do a nun order this class, and this is going to be a knave. Knave bore. Now I have for right, this is just getting alignment on that one item. The only thing in here is going to be the one item. So when do in L A class drop down and then we're going to have an anchor. And let's take a look again. So we have the text here, products add. So here's this little carrot we have We can click. There's a drop down. That's everything we're building right now. So for the anchor, we're just going to set this to basically and no up and no operation and drop down toggle. And I'm just gonna pay stay in the area related items. So there we go and we can close this off, so we're going to add a span which will also have a set of classes. This is actually going to create that little glitch if, But I'm gonna go ahead and add this text in here that we saw so products added in a cart. Okay, so now we're going to go after that glitch, which is Cliff Icon Google. If Icahn dash shopping cart, then just below this span, we can actually put the count of items in our cart. So we'll have a class carrot and then in here, we're going to bring in a bearable so to braces, will do cart products, died length and save that. So let's take a look now to see where we are goto products so you can see things were starting to get built out. Now, when we click, there's nothing that's gonna drop down here. So now we're going to add that part of the menu in and underneath this. Let's see. Anchor, we're going to start another on ordered list, which will be inside of this l I so down here on our list. So again, this is a nested one inside of this other list element. We're gonna do a drop down menu and then we're going to have drop down cart. Actually, this is one word and role of menu. So at this point, where we're going to do for our L I for our list items were gonna look through the various cart products and display them inside of that drop down. So for that, we're gonna access one of our ah, angular constructor elements. That's where we're using this story, cause it's gonna build out html forests. So we're gonna use a for loop, and we're gonna go from Are each generation is going to create an item coming out of a car products and we can close that. And now we're going to add in another class, and this is going to be a product cart items so product, court, item row, and we can close that, and we're going to add some styling onto that as well. So next What we have is where we're creating um, the division of columns inside of the drop down. So we're gonna have and eight and a four for those. So I'm gonna do mediums again. This is gonna be an eight and we're going to do a conditional for title, so that is gonna be a constructive element. We're going into a star N G if which is going to be item so checking, if even have anything there that's gonna access the items title using two braces on those and for the next one. So that's gonna be the next column, which will be four. So column medium for we also want our If and these should actually work in tandem. So if one is not there, the other really should not be there because again, we're checking for item on both, and we're just accessing different elements of it. So this time we're gonna access price. I am going to add in a dollar sign here. We're gonna put price in a strong and close it out there, and that should complete that part of it. So down here we have our l. I ending right there. And let's just go ahead and build this up a little bit. So over here, we're gonna add to cart and we click. Then we could see what's going on. We're gonna add this HR down here. This little lying and in our button. Next we add another one of these amakhosi. So you can see now the columns coming into play on that and the bold ID pricing there. This is the target site, though this is not ours. So let's take a look and you can't really see anything there. We can't actually add items to a cart yet, so it's not gonna expand until we have something actually put in their so below the ally. We have our h our and the next week when I have is another l I we're gonna do class, get back up here. And for this, we're gonna do our button. So this is the final part of it. It's just gonna be the primary to get that blue color. And we also want a button block and then roll is gonna be button. And this is equals small B when at a click on this click event. So this is going to go to a function called go to court and clothes. Close that and we'll do a view cart. So let's see here. It looks like we have probably an extra quotation here. Close that and save so that should complete. Now, at least that part of it and what we're going to do next is go ahead and add in the build out of all those different products. So let's just take a quick look now and try to refresh. I think we may have an issue. No, not down there. Let's go home and see if that will bring us back. No. So I'm going to stop this and just restart, All right? So let's take a look now. So still not going. So that's something. Will try toe resolve and get working again. Probably related to something that went on and here, but SCO coming up next, we're going to continue with the products area and building out dynamic code that's going to handle the display of all of our products. That's gonna be another loop where we just looked at those products and build out the structures in the rose dynamically 16. Dynamic Display of Products: we left off or we had static Web app right now and all of our pages air displaying that. Basically, it's coming from right here. What we're trying to do, we don't have a It's actually cart with the tea cart products. So what I'm gonna do for now is coming this out so we can move forward and we'll come back , Um, when we're ready for that section. So there's our site again, available to us. Now we're going to build out the section that we actually start displaying the various items. So down here, below these doves, we're going to begin creating the area that's gonna display the different items we have and those are going to come out of the component ts file. So we'll see that shortly. We're going to a container here, going to add a row, and we're going to have a column Medium 12 on this So column medium 12 and the next we're going to do is start with some sub columns. So here we can do a class column medium. This is going to be four, and we're going to have column centered and in here, we're going to have another for lewd. So another structural element in G four and that is going to look through our products so we'll get a product out of products I'm gonna also set and index. So I is gonna be an index. So let I equal index so that we have that per iterations. That's the first set of those. So that should create the columns that we saw. So the three would look over here. We have three columns on our target site, So that's how those are gonna get generated dynamically. And then we're gonna start with some cards to display these items. So this is a bootstrap, specific class that we're working with now, and we're going to ensure display block and for the images, we can go ahead and start accessing those. So are stalling is to be custom, image style. And again, we haven't started implementing product images yet. So the way we're going to set the source dynamically is like this, and that is gonna equal. We can do product. I am g here. So there's some dynamic code on the back inside of our type script file that we've not got involved with yet that we're starting to access here, so we'll be seeing that code shortly. Once you start building it out there, we're gonna have another class product. The sin container. This is going to be a row. And once these air built out, we're going to take a look to see what the impact of them are. These particular classes here on the visuals of this. Okay, so now what we're doing is adding in the actual titles of these products, so we'll have product title to braces to access the variable, and then we're going to do a colon and put in the price so product dot price and then on the next line will have a description. So we're going to access another variable product description and in our div closes out for that one. And so below this, we're also going to have an all set medium for column for and close to Remember, this right here is an offset. Times two is eight plus the four. And we get our 12 on that. And this is where we have our button. So class button. But it is gonna be primary, so we'll get a blue on that, and then We're also going to set a break point on small and as well we'll have a click event and this is gonna go to add to CART will drop in the index. So that's where that is coming in. And then now will do a disabled, which is going to need a little bit of logic. So product is added equals true. So if we already have it, we're just going to disable the spot news what it amounts to add to cart and save, and that completes the HTML. Let's take a look and our page here so visually no change there and you can see here this one's been added. This one's been added. So those buttons air great out right now. That's what that logic is doing for the disabled. OK, so we're going to move into the typescript file. We wanted to start adding in those various components. Um, so we have this and this Ah, import up here, we're gonna add another for router. This is something we've seen before. So we're gonna have activated route router from angular router and see here. So our component is good and what we're going to do now, inside of our export down here, start declaring a few different variables. So when have products and these are some of those variables that are coming through and the HTML and then we're going to do CART products, these air any so a lot of flexibility and how we're going to use those and then for a constructor, we're going to again pass in Router router and inside of N G on a NIT. We're going to access our local storage to get the items in the cart so some of this build out we need to take care of in other places. So if data does not equal no, we can go ahead and add the CART products, which is done with Jason. So parse data and then else will just re initialize cart products like that. Okay, so now we need to actually start building these products. So this products and we're gonna have a big array of items. Actually, we want to use braces like this, so I'm gonna do the 1st 1 and then just paste in the others because they all follow the same kind of pattern and what we have here, or key values um, as we set up this, these dictionaries inside of this big array. So Americano and just start adding the various items. The attributes for these items. So description is gonna be the same, and we'll have an image. And this is how we're getting these images. So assets do noun underscore, er 94 2609 Sisi, PNG. And then our price is we're just gonna be, too. And I put a coming here, save that and then another common here. Okay, so I'm gonna pace thes all the way down to item number nine. All right, so there we go. There's all of our items. Just make sure where this came in. Looks good. And that does, and this ends our array. So what we want here is a semi colon, and then before we close this completely out, we're going to add in our functions right here. So that is what we're going to do our next lesson and go out to her site so we can see there are some things starting to come in. Our stalling is going to help with a lot of this. Um, the way these these look so and our next lesson, we're going to go ahead and add in the functionality for the products and then, as well those styling. 17. Backend Product Functionality and Styling: we have a few different functions that we need to add in for our products. So we had the add to cart. We had the update court, the go to cart. So all of those were gonna be added now and just gonna put a little space here. So we have first off and to cart, which took in an index. Okay, so what we're going to do is create a product variable and we're going toe access products by the index and then cart data, which we're just gonna initialize to empty and are data. We're going to get the local storage again, get item, which is going to be cart. Now we can check. So if data does not equal no And if that is the case, court data gets an assignment, and that's gonna be Jason parse on our data. Okay, so that doesn't complete. Had to court data yet. What we need to do is push our product into the cart and update that storage that we're using this local storage. So that is what we're going to do now. We have court data and so push this product into it and in our storage, so update core data, Corot data. That's a function we don't have that we're going to create, Uh, shortly. So we now we have our local storage, and we are going to add in this item, so we'll have Jason String if I card data. Um, I see here they had a nice explanation for string if I never go. So converts JavaScript, value to a JavaScript, Jason strain. And in our products, we want to add This is for our display. Our current display is added. Let's see here. I'm not doing that quite right. Is an ID equals true? All right, so now we can go ahead with update cart data, which takes in court data that seem we need our braces. Okay, so all this does is cart products and overwrite with court data. And that is valid because right here, we're taking existing, adding to it. Then we take what we just updated and go ahead and overwrite the existing content. So it's still the existing content. Plus whatever we did two manipulated and then finally, we have a go to cart. So our navigation item here and we're going to use what we used before, so from the home page. A similar kind of thing is that we have carte here instead of products, and we're gonna put this inside of single quotes, and actually, that is backwards. So here we go. Single item array and save. Okay, so now we have a little CSS to fix the display of our products. So we saw the images were quite distorted. We're going to fix that now image style. And this is going to fix with I was just 40%. Um, we're gonna have a display of block, which helps out alignment. No margins. So which two? Zero auto. And then we had that other class, which was product descending container. And all this does is set some padding. So we have petting top, which is 15 pixels than we had padding bottom. And that is also 15 pixels. We had another loan class, which was custom products, carte container, and all it had was a patting top 20 pixels. Then we're gonna take this and, uh, go into this UN ordered list, and we're going to set a with of 75% and then a patting of 15%. So looking at this in the HTML and scrolling up. Let's see, here we have this UN ordered list. So this is where we're getting into This is our class. And then we're going into here, then into here, and start targeting the items within their. So that is how that worse. And if you hover over it, you can see how it's getting chained together. Okay, so now we have product cart as well. So, product cart item And what we're going to do is a display flex and as well, we have an item left. We're going to do the same thing on it. And this is a dash left and say that. All right, so let's take a look. See where we are now with thesis ICT so slowly started to come together and we can go ahead now, See what happens if we remove the comments here, Try to let the four loop go ahead and play out. Say that no heirs down there and still getting static Web app. So is very much isolated to this area here, though. And are four loop is fine. This right here is not gonna have any impact. Um, try and get back up here. This right year is the issue. So that was not valid directive. Now it should be. Let's go take another Look at that Stanic Web app. It is isolated to these two right here. I'm just gonna remove that and we can kind of see what's going on. There we go debugging tip there. So that kind of tells us it's just related to these two lines and I am going to actually do this. So I'm gonna remove the variables, say that and take a look. So it still seems to be related to that. And I'm gonna bring those back because once again, just another syntax issue. That's a capital I own there. So very subtle not getting any output as to what it is. So one of those things you would really just need to know. Okay, so there's our output. Not exactly what we need. So kind of like this site. So let's take a look at something here. We're gonna do an inspect to kind of understand what's happening. Um, so one thing to note is that the target site was built with an Alfa version of bootstrap, whereas we're actually working on I believe it's a beta two right now. That creates some differences, and we're going to see what some of those are. Sometimes they're not very easy to figure out. One is gonna be this column, medium 12 that we then nest all our other columns in. So let's go look at this site over here and just going to do an inspect. You can see this all looks the same right there. This right here for the column 12 looks the same. But if we go into our code and look for that column 12 which is this one gonna roll this up , make a little easier to get at it. Remove that and save. Let's go back and go to our site. Now notice what's going on. The layout is there, so that did not actually carry over. That particular technique did not carry over into the beta that were using for bootstrap, and there's a little bit more going on. So if we look our Squire's air kind of hitting each other over here, there's a little bit of gap, and if we go into this, we have these cards that we're working with the card and we have card block and you can see those are creating some of these differences. So we have Let's see, here a margin bottom. Remove that Now they run into each other. So we want to add these kinds of things that are going on in this one that we don't actually have in ours. And if we look at sea and get back into here was gonna roll this up if we look at the same area. So carding card block, we have card notice. We did not have card block, so that went away with the beta. So what we're going to do is actually substitute that in because we have card block in a lot of these. So here you waken say we have card blocked there. So what we're going to do is create a card class, so it basically mimics what went on in the previous so we can get the same kind of outlook , and that is very simple. So we just have a margin bottom that's going to be 0.75 room. Then we have our card block as well. That is gonna be we're gonna do a patting of 1.25 realm all around. Let's go back now and take a look. So here's our spacing down here. You know, I was thinking we may have a little bit too much padding, but I think it actually kind of works out the same. So I'm just gonna remove this and go back over. Here's go to the top. Remove this. Now there's gonna be a little bit of difference is the pages were gonna jump a little bit in alignment. But right now, everything is looking pretty close to what we have on one page versus the other. And we've pretty much got the layout that we were targeting at this point. So that will complete now the products section of the page. We can go ahead and click. You can see we get an item added up here, probably Liberace styling. We're gonna need to do their click and add another item we have to and you can see now we have our column appear dividing things up for us. But we'll check out what's going on with that little bit of stalling there. But that functionality is working. What we want to do now is create the functionality for our cart area and that is what we're going to do in our next lesson. 18. Cart Layout I: At this point, we have a lot of our application put together. So our home with the carousel is working. And down here we have our view products. We can click, we can go into our products. We have as well this product page that navigation is working are about is here. Well, we don't have yet. If courses the cart and we're going to build that out, let's take a look right here, though in the sideboard, this ad link. So basically, you're supposed to be able to type in a name like this and then just type this part in of the year or else you don't worry about the http. Then click add link that gets added underneath these other navigations. And now when you click it, you go out to a new page and there you are, and that works. So that part is even there. Now we're going to focus on our cart. So back in visual studio, we have some layout that we're going to work on to create the cart. And if we go ahead and check out the target website so there are two CART items here we need to do some formatting as well. On this drop down, let's go view the cart and we can see what that looks like. It's like maybe there's a path issue on those images, but this is the layout we're going to create. So a few columns to create in there we have a road down here at the bottom. And before we go ahead and create this court, let's fix up this remaining piece here and likely we're going to see there's some differences with bootstrap versions. So for going here and look at what is creating the padding that we're seeing, So I'm just going to go into products and right click and look at this. One will kind of compare and see where padding is coming from. So right here we have a little bit of a break point kicking in. Um, that's creating some of the padding, but not all of it. There's still a lot of padding that's going on that we are seeing. So here we are, getting into the drop down and right here, let's see, we have drop down menu drop down cart, and then over here we can see this is drop down menu, which of course, is helping Just make that display at all. And then here's drop down menu, which is the first class in here. So let's take a look and see what we confined in regards to some of the padding that we're seeing. The margin is not affecting it. We have text. The line is not affecting it. Ah, the rest of that is not really gonna do much either. Eso on the UL. That's where a lot of it is coming from. So this is where we're gonna want to focus on, and that is in custom products cart container. And that would be coming from a little bit up. So, custom products cart container. We're gonna go and look at ours just to see make sure that is coming through. So here we are, custom products, cart container. And if we go down here into the same section we were in earlier, which is let's see here, right here with our drop dome menu and our cart. And if we look for the custom products cart container, we're actually seeing it coming through. So let's go and take a look. Make sure this right here has the correct spelling and that it's not a case of just something being misspelled. So we're gonna are going to go into our products page because that's where the drop down is and custom products cart container and it has padding. So it is a spelling issue, it looks like. So if we look at what we have here and just remove that in the HTML, it is correct, because that's what it was. Just paste that as So let's take a look now. So we're still not getting anything. And the problem is, we're just not getting our reference there. And in this, where we're wanting it to effect is actually right here in this UL and this l I There's actually another custom practice court container in that CSS that does target those elements. Let's go back in here. That was this one, and that was also misspelled. We don't have to worry about the HTML because that's gonna be fine. And I think we're missing, and I just check the HTML, make sure that is good. Okay, so now for go back, check this. There we arse that fixes that issue, all right. And now we should build to go ahead and start on our cart. Someone close all of these products and we're going to work on the HTML part of the cart first. Then we can work on the component part of this. So start out. We're going to have a div with one row, and this is gonna have our header for the title, which is gonna go inside of an H one. We'll just do cart. Then we'll have an h r. Just put a B or under this and then a Dev, this is gonna have a class code carts, body container, and it's gonna be a row. So let's go take a look. Now we're right here, and we're now starting on this section down here, so starting to build these items, we would have some columns. They're gonna be 63 and three going over here. Actually restarted this. So that's why these images air coming back. Now they're wrapping all of this in a column 12. Um, which I don't think is going to really work for the current version of boot straps of this here. We're going to just leave ours out of that right there. There's not anything in particular that we need is just there for a break point purpose. So we're going to go ahead and create our columns now. And we're going to see how this goes without that wrap of the column 12. So this is going to be a loop. We're gonna have a class in here that's going to be CART product container, and then we're going to start our loop after that. So container and container row and they were gonna add a structural element here in G four that's gonna loot through CART products. So each generation's gonna throw off an item coming out of Corey Products, and we're also going to create an index. So I is going to equal index, then close that. And so what I'm gonna do is just create the column structures, and in the next lesson, we're gonna likely be able to finish this cart. So we're gonna go ahead and create the layout, and then we have, of course, um CSS that we're gonna need to create, so this is gonna be the main area of the images, and then we're gonna have next are smaller column, and this is gonna have a class called car it. Product descending. Then we're gonna have a medium three on that. We're gonna have a place to do. The editing is that's the last column, which is gonna be a class at it cart container. So we have a few different classes we have to come up with Has gotta be a medium three and closed that. Okay, so in our next lesson, we're gonna finish the structural components of this off. We've got the CSS we're gonna add in. That way we can see structure coming through. Ah, but at some point, we have to actually go into the typescript file for the cart and started making modifications on the back end toe. Have those items come through and display so we can actually see our layout. Okay, so that is what it will be coming up in our next lesson. 19. Cart Layout II: we left off with the layout of our cart. And so now we're going to continue on our main column here, which them display images. And if we take a look at our sight on the target site, So this is what that sixes for, That's why it's so big. So these images can come through. Then we got our three over here in our other three over here, which is the editing column. So going back over here into the six and we're going to do the dynamic images again. So a little bit of stalling on this is going to have a custom image style, and we're gonna reference source like this dynamically so we can attach item image, all right. And then we're gonna go down into this column, which is gonna have the titles and descriptions of our products and actually not gonna have a class for just going to a paragraph and referenced the variable item title and close that off. So that's all we needed, that one. And now we get into It's not actually a description, but a total price. So let's take a look and we can see here. So this right here is multiplying the price, times the quantity. If we up the quantity, we up the price. And of course, that's all just happening right there. Live in the page. So the way that gets done is we calculate those two variables and just have the result output. It's quite simple the way the syntax works with that, and all of that goes in a strong, so to braces, we're gonna reference both of the variable, so price, and then we're gonna do times item Q T. And that should get us the total price. Okay, so now we are moving down into the edit area. I'm going to do an input. We're gonna have a change event. So that goes inside of parentheses, which is gonna go to a function called Update Total like that. That's gonna go inside of our component file. And now we're doing this two ways. So we have brackets and parentheses inside of brackets. Um is going to be n g model, so that is going back into the model and to and from the page for item quantity. So remember we were able to change that item quantity right there in the page So now we're going to have a type just gonna be number in a class called form control and closed that. Save that. And there's actually this little X that we have. So I'm going to do a div class and probably need to change my three up there. So on the target site, that's a two. And we're going to see how this may shape up, probably to change one of these other columns to get this aligned, right. I don't know if we're gonna see layout at this point without any kind of content coming through. Okay, So, text danger, we're gonna get our red. We will add a click event because we can click and delete an item. So this is called remove item. We're passing an index in, so we know which one to remove. And we're just gonna do an X and save. Okay, so our column count is off of this point. What we want is keep that a to this right here. Maybe it can be a to so something like that. So now we have four right there, and we have nine now. If this became a fight, that will probably work and that should get us to where we need to be. So we have five and 8 10 and 12 and let's go take a look. So we're all right? We're not gonna see anything now. We can just wait until these come through until we start getting some data inside of here and come back and make whatever adjustments we might need there. Okay, so now we're going to create a row. That's going to be the bottom. Ah, Rove. No items in cart. So let's go over here. Probably going to see that on this one. But down here is where we're getting into. There's actually two sections. We have this pay bill and then there's no items in cart. So for remove this that will reveal itself. There we are. So that's the one we're gonna work on now, and that is going to be a div class container row. So now we're going to use a conditional to see if there's anything in here is that we will know how to display this and that is a capital I. So if not cart products left and then we are going to div. And here this is gonna be for no items in cart Stuart class and we're going to set this as a medium for so to get the rest of this, we're just gonna do offset medium for So remember, two times and offset. That gives us an eight. Plus, that four is 12. So now no items in court say that then we just have the bottom rope and we create another container. It's actually bill container that we're going to use and close that. So in here, we're going to create our columns. So column medium, we're going to a four, going to do an off set of medium to. So this means we have four and four is eight and we're going to do one more, which is gonna be a column medium of four and close that. So the top of this is gonna be our button for pay bill. We'll do a button and the class type on this is gonna be button route button, and then we're gonna do success to get our color. So I think it's green on success or should be, um, just gonna do button Aziz large, and we're going to do pull left for a little bit of alignment we're gonna attach to a click event on a function. It's gonna go inside of our typescript called Pay Bill two up with calculating all this. So that completes our button. So the last thing here, we're going to display the dollar amount, and we're also going to display Bill. That's gonna all go inside of spans. Gonna have to spans here. So we want to do a conditional structural elements. We have our store, and again we're checking for the ah cart to see if there's anything in it. So court products, let's we're going to put this in her strong. So what we can do is $0 in that case and in next. If we have something, it's going to another N g. If and we're going to bring back court products and check our bill strong, let's see, like that, take one of these out and we're just going to do a dollar sign. We're gonna reference Bill and save. So if you go look, think some of this should start be start coming through. Um, so I think that is a sin tax air and not actually an error with the fact that there's nothing to display at this point. So it is likely in one of these, Um, what I will do is just remove this right here, since it's all grouped so kind of debugging through this and looks like it is down there. So bring that back. Remove these. Let's take a look. So it is. And one of these right here missing a brace must see it. That is it. That is it. Okay, so that is looking pretty good. So far, we are going to start with the typescript file in our next lesson and build it out. Then we'll come back with CSS in any kind of adjustments. We need to make layout wise in the next lesson. 20. Cart Controller: we're moving into the back in part of our cart. So we have a few different functions that we're going to be adding in here to actually make everything work with the card. Right now, what we have is our default values. We're going to start building up on this, which means we're going to be working in this area here, which is our class. So the first thing we're going to do is declare a couple of variables. We have carte products and we have Bill. We've seen those in the HTML. So now we need to go ahead and make them exist. So we're gonna have court products that's going to use in any type, and we're gonna have Bill any really just allows for a lot of flexibility and how we're going to store data. So for the constructor, we're not gonna do any kind of modifications. We're gonna have a function call here which is going to go to, and actually, what we can do is declare it first and then we'll call. It is gonna be our initiate data function, so that's gonna go right under the N G. In it. So we're still inside of our CART component class here. So we'll call this initiate data and in here. So we're going to initiate our data from the local storage. So we'll get the cart. Well, parts that apart, we have that Jason Parcher that we use to get the actual items in the cart will set built zero, and then we're going to look through the cart items and add them into our cart products array. So let's get the local storage because that's how we're keeping the cart data as we go from page to page. Just making use of that local storage structure. So here, we're gonna have get item. It's going to be called part, and we're going to check if there's anything there, so he does not know we're going to perform a few operations. So the first part of this is we're going to assign the Jason Value into the CART products are actually we're gonna parts it apart and then assign it in there. So we have a structure now that it was readable on more workable. We're gonna take Bill and just initialize it like we're doing everything here. Now we can start our loop, which is gonna go through CART products. So we're just gonna create an iterated called I and start looping through CART products. And each time we're going to get an item, we're gonna add it to CART products. We're also going to go ahead and calculate a bill on this. So we have this card products and we're going to access a two dimensional array. So we have the 1st 1 as our I and then we're going to access quantity. Set that to just one and the next we can work on Bill. So this bill is gonna equal the calculation, which is gonna be whatever is in there now, the new items. So we're gonna have court products. We're just gonna go to I on that which we can get price. At this point, we'll do the same. Ah, index operation here. But this time we're going to get Q t. So this way we get the total price on the one item, then added to the rest of our items. All right, so after this loop, we're going to work on our else of this conditional So you can see here my brackets are highlighting just so I know I am at the bottom of the If and in that case we just said our cart products to empty just initialize it out. So if they are no, we're just going to go ahead and set our structure to no meaning. If the data is know that we're getting out over local storage, we also want our car products to be in a good state or initialize state. Now for go back up here. We can do this call to initiate data, and it's gonna have empty parameters. So the next function is going to be for our update total. And I'm just going to do a capital T. So just making use of camel case. So in this case, we set our bill to zero because that is always being calculated or not actually dragging it around. And we're going to look through our cart items using the same kind of loop we had earlier. So we'll have carte products, and then down here, we're going to do a calculation of the bill. This is actually going to be this calculation. Put that there. So a similar loop is what happened up here. It said this time we don't have to involve CART products. Were just updating the bill, updating the total just like the function there says so Now we need to also handle removing oven item. So we're gonna call this remove item. We need to know what the item is. So we're gonna have an index just calling an I D. Locally. All right, so we'll take our CART products and we're going to spice these on our I d and R ro. So it's not a complex array. That's why were able to make use of the one there, Um, and the i d that we're sending in. So that's gonna be the actual item. Then we have the structure in there. We're just taking the one element we get out of this structure and we're splitting it. So that way we have our price and quantity and components. And then from there, we're going to look at our cart products and check for length. So if we have anything, we can set this into our local storage. So we're gonna do a set item instead of a get item that's gonna be cart, which is what we've been using now, instead of parsing apart, Jason. We're actually gonna put it back into Jason. So we're gonna have our Jason file We're gonna string if I and this cart products and at a cynical and now we're going to do and else on this. So this is the case. There's nothing in there. So take our local storage and said item, so we're just gonna know it out basically like that. And we have another function we have to take care of, which is called Pay Bill. So down here, no parameters going into it. So just empty. And what we're going to do is check to see if there are any cart products. If there are, then we could remove him. And we're gonna initialize everything because the bill's been paid at this point. So this is basically taking everything the local storage they're raised in, knowing them out or initializing them basically. So we're going to start with a cart products to see if we have anything will do that by checking length. So if that is the case, we can go ahead and start the initialization of all of our different structures. So we're going to remove cart from the local storage. Then we're going to call our initiate data, reset everything and pop up and alert to the user to let them know your bill and we can use to lower case is and we'll do a plus this bill because that still has a value at this point and at a semi colon. And we're going to do in else which in this case will do an alert. And we're going to say no items in CART and going to do our semi colon. All right, let's just go take a look now to see what the state of everything is just in regards to the card. So this is our website, and we're going to now go to cart view cart and looks like there is, ah calculation issue there. But let's just keep going. It's gonna grab that for the bill. We can see it's 80 for your bill. So at this point, it's just kind of mimicking. Okay, so we got to this point and then what you do. You do have the data so you can send it to the payment processor. Although for us, we're not getting involved in all Ah, the back end with an external system. So we just clear it out and kind of mimic that the results came back from the payment processor. Okay, so we can click. OK, and there we are. Everything is initialized out. Let's just go back to products. We can see that a zero now that has been initialized out. So what we have remaining is a little bit of CSS work for the cart. Um, we're also gonna just take a look and see why we were getting the 804 versus the 802 So if I add these two items back in there, so you can see here, that should be in 100 to let's just do an increment. That 1600. And if we pay Bill, So, yeah, we're getting 805 down there. We were 804 so we can take a look at that and see what's going on in our next lesson as well 21. Cart Styling: we're going to now get into the stalling of our cart page. But before we do that, we need to look at the issue that we saw earlier with the amount of the item that we have compared to the total bill. So you can see I have $3 down here when in fact it should be to unify increments this, then it starts matching. So something is going on. And the calculation that we're looking at here is done inside of the car components. So we're going to take a look at that going individual studio code. We're gonna go into the cart component, and if we look at the HTML, we can see where this might be occurring, which is right here, inside of update total and going into a day total, which we can see here. Just take a look at this and see what might be going on. So we add to our existing bill. This is in addition here of the price times, the quantity but notice Here we have a plus, so that's definitely a knish. You were going to go ahead and replace that this is done and another area as well this kind of calculations. So we want to check that, and that's on the initiate data. And there's actually a plus there as well. So saving that, let's go take a look now to see where we might be, So that looks good. That's accurate. Let's go ahead and commit this one more time. That's four. And for now, we can add another item. So I'm gonna add the espresso machine. Now we can go and check view cart and here we have 802 and if we go back up, we have 804 and that is correct. But that's not the only issue that we're going to run into. So here is another issue. If we remove this item, remove this item. Now the card is cleared. We gotta products. Click add cart. Notice that nothing is getting locked out. Sorry is added. Property is not being set or something else is going on. But this is an issue. We're in the products page. This is an issue inside of the product component. So let's go take a look at what might be happening there. So this is the product component. All that is happening on the ad cards. This is where we are. What it's doing here is looking to see if it's no whenever it gets the data from the cart. So we're going to just do a liberal logging to see if we actually have that. No. And this right here is triggering. And then what may be happening? Going forward. So what we can do there is do a console log and we're gonna log out the data. Say that will go back in and doing Inspect. What we're going to do is look for the console, which is here. We're gonna clear this out. And now we're going to go ahead and try and add an item. Okay, so there is a problem going on, but notice we do have a No. But this is comparing for a no. So something may be going on here. What we can do also is another log, and it may be just be the no. We're thinking it's returning is not the same kind of No. So what we're going to do in this case is checked the type and just do a colon and a plus several into type of data. Let's see what this is. All right. So going back out here, clear this console, We're gonna add that, See what we have. So we have a string that is gonna be different, because the string is not gonna be empty. In fact, we could attach length to it, and there probably be a little bit of data coming back. So what we're going to do in this case is changed this and put it in quotes. And now let's go back. I'm gonna go ahead and clear the console We're gonna add Okay, so that is different notice here. This is great out. We're getting our item in our cart as well. We can add another item and we're getting in there. And also we can see what exactly is coming through inside of what we're getting out of our local storage. So that was just a issue to be aware of because we were dealing with the string. It wasn't sending back the kind of know we were thinking should sit back. But now that's working. Okay, so we're going to move into the cart CSS and start with some of the stalling that we have to complete their which is already being called in our HTML. So we're gonna start with carts, body container. And just to make sure this spelling is correct, we're actually gonna go and look for that inside of here and find So there we go. That is correct. And we can go ahead and continue on now. So this is just gonna be a little bit of padding. We're gonna have padding on the top and we're gonna have it on the bottom is well, so we're gonna do a pixel. 15 pixels would have padding on the bottom as 15 pixels. So next. What we want is CART product container, and we're once again going to make sure we have the spelling, correct. So we'll just go ahead and paste union and there it ISS So for this one, we're going to do a display flex. So basically, take all the default flex properties in that case and the next, we're gonna also work on her image. So we have product CART products, container image, so we're gonna target the image there, and we're just going to make it not quite as big to like, 75% on the with. We could do a haIf that's gonna be 75%. And we should get some consistent outlook. No matter how we approach cart, whether from the drop down or clicking it in the sidebar, then we have Bill Container, which was at the bottom. And for that, what we're going to do is display Flex. So once again, just take all the flex defaults and we have as well, Bill Container. And this is going to be a div that we're going to target the end child. So we're going to add these properties. Then we're actually gonna go look and see what that is doing. Okay, so on this, we're going to a patting top of 20 p x. And they were going to do a patting left wannabe explicit so that there's nothing there. The next item that we have is gonna be cart product descending. So for this one, like most of these, it's just gonna be some padding. We're gonna go with 15 p x and we're gonna do the bottom, which is also going to be the same. So you can see here. There's nothing complex at all going on with any of these classes, just making sure things are adjusted, not hitting each other. And actually, that one is misspelled. So over here, this should be descending with a hyphen. And I'm just gonna copy that once again and go back into the HTML. We'll take a look. So there we are. All right. And so the final one is gonna be our edit court container, and we're going to search just to make sure there we are. So that is a match. And in this case, we're going back again with Flex. And we're also just gonna do some padding. Top 45 p. X. Okay, so now let's go take a look. See where we are with the cart. We need Ah, we have two items, so that's good. All right, this is our cart. And these over here, we probably should adjust some high phone those, but let's take a look at some of the classes that we've added. So we're gonna do inspect on here and go into this section. So here we are. There's our carton product container and then going down to the bottom, we had some adjusting down Here is Well, here's our bill container and the stiff down here the second div. So if we take a look at it, we can see here this padding of 20 PX in this zero p x. Let's go back into our CSS to see what we did there. So you could see we did target the div inside of that class. Then we told it to go to the second day of That's what that is child to did. So that's how we're able to target that one, specifically, Which is this Here? Okay, so let's look at what is going on with these boxes over here. And if we look at our edit container and we can see we don't have any haIf information, So the input box haIf is just kind of following along with an inherent basically so one thing we can do, um, we can just put it here. This right here is just gonna be input and form. Control is coming out of bootstrap. So I'm gonna add in another item on high thing is gonna be like a 30 picks. So So look it there. If we scroll up, you can see that one's also adjusted as well. So all we need to do in this case, we're gonna target our input tag, and we're gonna add in height for it. That should handle that issue with the height. So we're just gonna do 30 p x, Save that. Go back out here. And there we are. Yes, they bring back my inspect and let's take a look at these exes. So they kind of have the same issue with Let's see if there is a class here. No, there is not. So we know those are all gonna be inside of this column. We can put an I d on there and target the i d. It would just be another haIf so going back over here, whatever we might want to call it, we can just say something like X button, and we'll just take this haIf put that there. Now we need to go and target those buttons. So let's see, here we are appear and it should be right here, so we'll do an I d like that. Say that. Let's go check. So we need a little bit of probably padding to push that down. If we look at what we have here on this one, we have padding Top 45. That's basically all we're gonna need. I'm gonna copy this right here, this patting top and we can go ahead and see what that's gonna look like real quick before we make the change. That's 45 p X, and that's what we want. So going back over here will make that quick adjustment to this class or this selector Patting top is gonna be 45 p x. Save that. And there we are, and they're both adjusted. So that will finish off our work now on our cart. So we have all of our products. We have our home page. The back end processing is doing what we want and our card is calculating. Were able to pay our bill, have it clear out we even did a little bit of debugging to figure out some issues that were going on. When we clear out all the items, um, looked at why the items were not calculating properly. So we got to dive more into the backing components where typescript file is and make a few adjustments there and resolve those issues so nice. What we're going to do is a summary of what we've covered in the course 22. Module 2 Summary: I'm going to summarize what we've covered in this module where we're building out our shopping cart. So the first thing we did was create the project, get the about page up and running, which was the simplest page we had in the project. So that's why we targeted that one just so we can see basically everything working for the request and the responses going into and out of the website. Then from there we started on the template for the entire sites layout bringing in the navigation footer, the side bore and making sure all of that looked right. The home page. We had the carousel, the bootstrap care. So that was swapping images out. So we did a little bit of adjusting to get everything laid out, make sure that the captions for the care cells looked right and that we had our buttons in place and just generally making sure that it all looked pretty good from there. We turned on our routing, so we brought in a Liberte routing, commented it out because we didn't have the pages that were being targeted in the routing. Yet after those were created. So we saw how to create components in Bootstrap, which created the home page that cart the product, all the different pages that we needed. We remove the comments cause those pages were there and that started bringing routing in. Next we created the products page, which is one of the more complex pages. So for it we had the dynamic display of those products, and this required a loop on the front end on the view and some working with bootstrapped to get the columns. And the Rose writes that we didn't wind up what they lay out that didn't look the way we wanted it to. And the back end functionality on that products page was really the Jason products that we had and put them into an array and then look for them on the front end. And we added in some styling to start getting things looking right. Then we had our cart layout that we had to divide up in the columns and then do some adjusting to resize some of our input boxes for quantity, reposition our X that removes a product and then the court controller, of course, which was calculating the totals. And as we adjust quantities we had to recalculate the total for that product and then added into the overall total is, well, there was cart stalling. So this is where we started getting a few final things adjusted on the cart and making it look good. So that is a summary of this section, and you'll notice we didn't actually use that side bore component inside of the course that one wasn't needed. We were able just to stay with the main app DOT files and work with sidebar from there. But that sidebar component is there and could be used if you wanted to just isolate things mawr into it. But for us, it was it really necessary. While there's a lot going on in the site, it's not that complex, but certainly good enough to bring us through and get us up on going with angular and also integrating boot shop with angular and seeing how it works with angular. So the last lesson is just going to be a summary ization of the entire course. So at this point, we've built up our project. The files will be available to you if you want to go through those and look at them as well . So the course summary is coming up next 23. Course Summary: I'm gonna go through a quick summary of what we've covered in the course. So we had our introduction, which was a section that covered some of the angular concepts, not too much in detail, because again, this was very hands on. So we got to see that while we was building up our shopping cart application and we had tolling so use visual studio code to write our applications in, and it's really an integrated environment. So we had our command line right there that we could start. The application is the only other thing we need. It really was the browser, and then we built our first application. So we got to see how the tolling, how the command line and in PM all came together to produce an app and have it run inside of the browser, our next sections where we really got into the meat of the course. So here we built our shopping cart application. There was quite a bit going on, so we created the about page first so we could just see some static content coming through . And from there we built in our routing down, we can go to the other pages that we have once that's in there, and we started adding in the products we saw how we could take those from a Jason format in our products back in and have a display dynamically. And it laid out the columns in the rose all dynamically. Of course, we use bootstrap to help us with that lay out there and then our shopping cart. We did a little bit of debugging to figure out why something may not be working right, which kind of helps us in the future. When we wrote into some issues will know how do you go and figure out what's happening and what can you look for? And a lot of it was just doing a right click inspect and just following through the different classes that we have, where sections are and making some adjustments on the back end. And Aziz well, we could see how the log information out to the consoles that was a console dot log and pass in whatever it is you want to log out. So that's just a summary ization, and you've now completed the course and made it all the way to the end of this fast track. I hope that you've gotten a lot out of it. There was a lot going on in it. You've got the code available to you now to go and play with and figure things out, maybe make a few modifications and adjustments and make the application do something different that we didn't do inside of the course. So once again, my name is Brett. And thank you for taking this angular boot camp fast track course.