 All right, so routing, we'll look at routing first. So we'll talk about route. We'll talk about this location here, right? This path, the routing path, which is the ones after the URL, the port number. This is just the main server. We have a port number. Angular runs a different port number at 4,200. And then after that, anything after that is called the route, right? And the forward slash here is always points to the root of this page or this domain or this site. And anything after that will lead to a different path that will load a particular component. So those patterns, URL pattern here or URL path can be set in any way you like. It doesn't matter how you do it or whatever name you use, if you choose, you can choose anything you want. It does not need to match the component name. Although it's ideal, you can name it whatever you want. And also for secure reasons, like if you go to, you know, how you create a classic, you know, or HTML page, you have your file index HTML, contact that index HTML, right, every index.html. If you navigate to those URL, those pages, then you know for sure that that is the physical page that contains those data. Okay? But with the, you know, template system and frameworks like this, you can change the URL to anything you want. And because you only see the actual page or template and the source code and the back end on the source, users will not know what the underlying template looks like or what it's named. They don't know that. So in a way, it's a way to secure your actual page or file so they can hack into your file, right? Show that a little bit later. But usually we've seen this before, right, slash and then the products, and then slash the page, slash the parameter. This would be like an ID, for example, like page three, page two, whatever it is, or maybe products and then slash just the number for the product ID. So in our app, we have a flight, right? Flight slash, then whatever ID is, we'll load the flight information or we want to edit, we'll say edit slash the number of the ID to edit. Okay? And then where do we display this pattern or this content? Okay, if you want to go to slash about, where do I render the about content? And that is where we use this thing called router outlet. You've seen that already in the component in the app component. And I mentioned before not to delete it because we're going to revisit that again. So today, we'll look at that and what that does. Okay, so it's a special placeholder in the component HTML that allows Angular to render a component to that location, right? To that tag, right? Dynamically, I mean you can load different content to that location versus if you put like, you know, bracket app dash nav, then you will always render the nav component there only. You cannot add other stuff to it. But if you use this router outlet, then this is a placeholder. So the other two, if you remember the Henevars and the main, you know, index HBS, you have the three brackets followed with the word body and then the closing brackets, right? So the word body is the placeholder to load any content. The same idea for this route here, okay? So to have this work, remember when you set up your application, it asks you a question if you want to set routing. And if you said no, then you would not have this file. If you did say yes, then somewhere in your program you're going to have a module called Routes or Router, I forget what it's called, Routes. Yeah, Routes module right here. Okay, this is an app called Routes.module.ts Yes, and in that module file, we're going to create some routes and a route looks something like this, right? There are actually more attributes, but we're going to look only at two of them. The first one here, as you can see, it's an object, right? Anything in curly brace is always an object. Object always have key value pair. Just remember that, okay? So here in this first object, or this is called the first path, we have a parameter called path, right, colon. And then here you see there's an empty string. It's kind of tiny, but it's empty string. And what this signifies is that this empty string is actually the root directory of the page. So Angular, you should not put a slash here. In Express, we put a slash to indicate that's this slash here. But Angular, you cannot put that, okay? If you put that, I believe it's going to crash your program. So just leave it blank. It will automatically load this slash here, and that is the root directory of your site. The second parameter is a keyword called component. Just like it is, component expects to load what component should you load when a user visits this path. And so in this example, I'm going to load the home component. In this case will be the home page of your site, right? So you import the home component up here. You need to import that. And then it's going to render that component when you visit this URL, okay? And if you visit another URL, say product, again, notice you're going to put a slash in front. Just the name of the product, that's it. If you have visited this URL, then it matches this pattern, and therefore I'm going to load another component called product detail component, right? So whatever component is, you put it right here. And it can only be one component per path, okay? Just like the end of our same similar idea. And so you can add all your navigation routes in this file, and this object called routes. And as you can see, it's just a variable name, right? It has a colon here. I mentioned last time that a colon here in pipe type script signifies a data type. And so the type of this route is called the routes type, which is a built-in module provided by Angular, part of the Angular framework. So that means your data here must follow this pattern. You can't put other stuff in here, okay? And then once you create this variable, and then we're going to... Because this is a module, right? It's a router module. We're going to export it, as you can see down here. But we need to import something here called the router module. And this already created for us automatically, so you don't have to manually do this. But if you do, you know, create your own, then yeah, you have to follow this kind of pattern here. We pass and do routes. We create here to the router module. This module is this module up here. You need this module to handle all the routes. It will delegate all these routes to a particular component. You'll render that, okay? That's where you pass it to a function called for root. There's a, I think a couple of functions, at least three of them. But the one we use is called for root, meaning we're going to pass this route to the root component. Okay? And so all your routes will be accessible in the root component. And there's also child component as well. We'll do that later, where you can have a sub-route. Right? And a child component will be something like I showed you up here. We have, like, let me see this one example, like it or not. Yeah, like this will be a child component. So you have the main component or the component called products. But under that you have another component called page, right? This is a child component of this component. So remember that you can build multiple components under a parent component. So this could be the parent component, the child component. You can have another component. You keep going. So because of that capability, you can also design your pattern to match those components. And we'll have to build child components later when we do with the, I think, I don't remember if you would get to do that now, but we'll see. I think we might do. I think we'll do get to use that as well. So anyway, so you would then pass that to the router module. And then you export this class to the ad module. And this ad module. I think this is incorrect. Oh, yeah, this is fine. I'm sorry. Yeah, I'm looking at the ad module. Okay, so this one here, we put the route right on the ad module. This example here. You could put it here if you want. But on our example, we put it into a separate module and we put it into the ad module. So I'm going to, yeah, instead of looking at all this information, we'll come back and we look at this. But I want to go to the app here and look at our app. And we'll build some routes for our demo pages. Okay. So if you remember our app last week. And I hope everything is still here. Let me set my app first. Okay, I need to do install. Well, it's installing. I'm going to go open my SRC folder. I wish this could be big, but pretty tiny. Go to the app. And here you will see this app routing that modules file. If you open the file, this is a module. Okay, it has error messages because I'm still installing my components, but just ignore the red stuff for now. You will see that this is what created for us already automatically. We are going to create a route right in here. Okay. This is going to be an object of a route. So I'm going to have one, two, maybe three or a couple of them. Okay. And then here we create a route of type routes. And we're going to import the route module, this one here, to that function called route that passed our routes to it. All of these will be passed to that function. So the Angular will know these patterns. Okay. If it is not passed to that function to this module, Angular will not know those patterns. It won't work. And then once we got that set up, and then we need to export this module out to another module. In this case, we're exporting this app routing module to the root module called app module right here. And you will see up here, that's the first thing we see in the imports up here. And then we import everything and then we add it to the imports property because it's a module and not a component, right? So now all the modules, all the routes are accessible in this route. This is a route. Okay. So that's what we see. Of course, you want to put all your routes in a different module and put it in. If you don't do that, then you want to put all these routes right in here. For example, you could do that. But then again, if you do this, your route gets really big. It gets re-bloated. And so it makes your code really ugly. It's not ideal to put it here. If you have one or two routes and your app is really small, then sure, that's fine. But ideally, you want to use a component, I mean a module to manage those routes. And routes can only be declared inside a module, okay? You cannot put a route in a component. It must be in a module. That's why this is called the app routing module and it's the ng module. Okay. That's the rule. So if you want to create your route inside, let's say the about page, you can. That means inside the about page, you must have an about module to manage the routing. Okay. You can do that if you want, of course. Absolutely. So we have a module. I remember if we did like a footed nav, right? A footed nav here. Remember we have a footed nav module. We could have a, you know, we could build, you know, some navigation here if you want because it's a module. And then we can put that included in that module to the app component like we did here. Right? And that would be fine. If this file gets really big and if it's very hard to manage, then you could also, you know, move some of these components on these routes to their particular module that they can be easily managed. And sometimes that's the case, but not always. So you will see that all your routes will be contained here. All right. So now if you open the app component HTML, this is the home page we did last week. I did a brief example to show you how you import a table from a bootstrap to build our application, right? And then down here, as you can see on the, actually on the very top here, there's a tag called app.nav and that's an app. This is a Angular tag, right? Component tag. We create that in the app. And that component. And this will always be visible in the same content every page we go to because it's on this root component template. Now, if I collapse this and go to the bottom of the page, you will see here line 40, actually 42, another one, right? The footer is when you're always running the footer content in every page we go to. Okay, you'll see. So here in line 40 is the router outlet. Okay. This is where you render components to the root template here. So if I navigate to, let's say the about page, then Angular is going to look at the route and find a matching route and then load a component to line 40 and you will see the content here, which is the thing that is different. But this will be visible. It's always the same. It's always the same. So therefore, if you remember back to, again, the handlebars, this is like the header navigation, right? The partial. This is the partial. And this is the body of your component. Okay. So let me run my app first. Here I'm going to go in G serve with a dash pro to auto load. Hopefully no errors. That's an error. Okay, that's not regular. Yeah, I've been starting to that first. You serve dash. Let's make sure it's everything's running normally. Looks good. Close that now. And I'll choose. What do you go? I lost it. Let's go. Alcohol's 4200. Right. So here's the app. The last week. Right. So the navigation here, as you can see, if I click the about, it flashes right here. It flashes. Right. Slash about and then it's gone. Same thing here. Lights. Right. And edit something. Okay, because you would never load the content because the routing was not set. So we now we need to set the route to take us to the home page, which is the forward slash the about the flights and the ad flight. Okay. So let's go to the source code. And I've closed this terminal. And we'll leave this as is. So now if I go to this app routing module, and I'm going to add the about page. Well, let's add the at the homepage first. In our case, the homepage is really the ad component here. Right. We have this form here. Okay. So this form here really later on, you're going to move this to a flight. Component. You know what, maybe we should do that. Okay. Let's do that. I don't want to load this on a homepage. So this should be something about your flight information. So we'll create another component for the homepage. And then we'll move this table to another component. We'll call it when we flight data or flight list is the one I use. Okay. So why don't we do that first. And go again back to the terminal. And let's add another tab here, leave that open. So navigate to your application. Make sure you're in the application directory where the package Jason is. Right. It must be in that, that file, that directory. And let's create a component called flight list. And when we navigate to the flight list, we're going to show that information. And that is going to see right here, if I click on this flight. It shows the URL is just flights. Right. So let's create a component for the flights. So when I navigate to this page, it's going to show this instead on the homepage. It will show something else. Okay. So over here, I'm going to go and generate component call flight. I will call it flight list. Okay. But our route will be just called flight. Right. Let's all the data. And I don't need the test. So dash dash skip tasks. And also I don't need the style sheet. So dash dash ask for style sheet and hit enter to create two files for us. Just the ones that we need. All right. So now then this is the app component HTML. I'm going to copy everything from line three. Let's see. No, not like we just a table. Okay. So I'm going to copy the table. Like for all the way down to line 35 in my example. Well, I'm going to cut it out. I'm not going to copy it, cut it up. And paste that into the flight list. HTML component. Okay. So we replace everything here with that. So I moved everything over to this page. And I really want my thing to. My data is not like, it's not wrapped. It needs to be wrapped. I can see it. Let me see. I usually click here and let me do it, but this one doesn't let me do it. Let me do config first config preference settings and type for wrap. So we're wrapped here. It's all should be on. Okay. So make that on and save. Okay. So I don't have to scroll left or right. Okay. So I moved my content here. Now in the app component, this is going to where I put my home stuff. So therefore all my content should be loaded inside this tag. If that's the case, then I want to. Let's see what the looks like. Usually I want to put this inside the div tag. I'm going to try putting it as it was like, okay, it might be different. If it's different, we can always change it. Because I want all my content to be contained within the content class. So my route will be in here or everything else will be rendered here. Right. So let's save that for now. And why don't we create another component called the home component. And we'll, we'll put that in here as well. Right. So back to the terminal again. Create another one NG GC home. Just home. Again, skip tests and skip the style sheet. So the homepage is the lending page. The app that couple of HTML is that shell. If you remember the other example we did. Right. This component here is like the index dot HBS and the handle bar. We usually don't touch this, right? You just put a navigation and the footer and then the content we change here. And so below the homepage here about page here and so on. So this was done for now. I'm going to close this. And I'm going to also close the terminal. So I have a home component here as you can see. This is the homepage. And you can put some stuff here. Right. So you can do something like maybe not homework spread. Each one, you know, welcome to my Angular app. Right. Or something. Okay. That's your homepage. So let's say that. And so now we're ready to go and then build our routes. So right in here, the first one is the homepage. The order here is not important. The only important is the catch all. Again, there is also a catch all in Angular. And as I say, most frameworks have it. If you remember in the handlebars is the star, right? Or express the star is the catch all in Angular is similar. It uses two stars. So we'll use that later. So now the first one is going to be our path to the home page. So again, the home page will be just the slash and the slash again, don't include it. If you put a slash, it won't work. So just put a blank. And that, when I go to that route, it's going to render which component is it? Well, it's the component called home component. As you can see, if you have it already hit enter, it's going to import the home component automatically here. You need that in order to use it, right? Put that here. And then we got our first component. Okay. So now what's what happens when I click save? I add a one route. It's got a little home component. I've removed my, here's my home component. So if I navigate to my webpage, we'll see, okay, some errors. I need to probably reload my script. Let's go to terminal and run it again under the first tab. Some errors here, right? So reason why this fails because I have some information, which I don't have anymore. And yeah, I need to fix this first. When we move the, let's fix that. We move the flight list over here, right? We don't have access to this anymore because the flight list component does not have that information, right? There's no data. So therefore I need to go to the app component ps over here and copy this over. So copy the flights. I should remove this over, okay? The flight and also the delete function we created last week. And also this import up here. You need to move that over to the other file. So we're going to cut that up and move that to the flight list component ps right down here. You can leave this as if you want. You can remove it. It's okay too. And then it has a red line because we need to import that. Okay. So you could go back here and copy this or cut that out, right? And paste it up here. Or in Angular, if you have the data, you just don't import it. You could also put your mouse over that red line. And there is a option that says quick fix. If you click on that, it's going to ask you to import the component. If that's the one you want, then yes, you click on it and it will automatically import that for you as well. Okay. So when you see something like that, you know, mouse over and see this is shortcut to help you import. And sometimes you have more options. Just make sure you get the right one. So now we get our data back in. And then now our template has access to the flight. And therefore our app should work just like before. And it's not working because of other stuff. We added some other stuff to the component. So I'm going to terminate my application and run again. And then I'm going to say ng-serve. I won't use the dash o anymore because my app is already running in the browser. I just need to refresh the browser. Okay, all done. And let's give it a try. All right. So there's nothing here. And I'm going to press F to see this in errors. Okay. My console has some errors. Okay. It says one of the following must be, so it's not working because my route, is it slash? I might have those empty routes. Let's see. Let's remove, let's remove, let me save this file first. Let's save that first. I don't touch this for now. My route, let me remove these and see. Okay. So there it is. Yeah. I had some empty routes so it doesn't work. All right. So make sure you move those empty rubble, add it later. And then you see that now my homepage is, is no longer displaying the table anymore. It loads the home component right between the map and the footer and that location. Okay. And why? Because we add the route of the URL, the slash. In fact, if you go to any page, it's going to load that because that is what, yeah, as you can see now it doesn't load anymore. This is nothing to load it because there's no matching pattern for that. Okay. If I go to, you know, slash ABC, there's no URL for that. So there were nothing, it's loaded. And because routing is now in place, taking place. So therefore there's no matching route for that. And then you'll see that it's not working and there's no error. Okay. So far so good. And that's where the catch all comes in. So once you provide rounds that everything must match. Right. And also because we, we modify our root component to include the route only before we put the actual tagging here on the actual table here. So if you don't put a route, then of course it's going to show up here. Like the net and so on. So for example, if I go here and put back to the app dash home, right, that is always going to be visible. And then I have my route below it. So in this case, I'm going to show that twice. The app home is always there. This only runs when the pattern matches. So you see my page, you see how two of them, this is the one that is fixed, it's always visible. This one here only runs when the pattern matches. So when I navigate to another page, you will see that the second one is gone. This is again, it's visible on every page. So whatever is visible on every page you put into the component, like I just did. Like your navigation is here, your footer. If something is not supposed to be there, only when you reach a certain destination, then don't put it there. Okay. So if you understand this concept, you'll see how most frameworks work just like this. So in this case, I'm not going to put it here. I'll load it only when I match the pattern. Okay, so let's go and create a catch all first. So down here, you'll catch all what looks similar to this. But you put it around here, it must be the last one also. Very bottom. You put two stars in here, it's the catch all. And where does it take you when you reach this pattern? So you can have another, you know, not found component like you did with the express application. Or you can always, you know, navigate to the home page if that's the case. So since I don't have a not found component, I'm going to load the home page as default. Okay, so if I navigate to something that exists, always takes you to the home page. So I'll put that here and we'll see if that works. Save that. Go back to the browser. Okay, so this is the home page. If I navigate to about, you'll see it always loads the home page. Now you'll see that the navigation sticks. Before it did not stick because there's no matching pattern because now the catch all will catch every pattern in your browser. It doesn't matter if they exist or not. Because because you can catch that now the URL sticks. Okay, I go to about, go to flights, app lines, whatever, you know, whatever you put here will run because the catch all will catch it. So just like before, that's the catch all. It must be the last. If it's not, you will never reach the other components or pattern. Okay, so that's the last one. Now let's create for the other one. I'm going to copy this and do it three, four times. That's the home page. You can also say if the user goes to, if the type like home, that will also load the home page. Right, you can have multiple patterns. This loads home page, the blank loads home page. If the type home, loads home page. If the type index also loads home page. So you have all those options. So I'll keep those two up here. And then the next one is the about page. So about will load the about component. I need to go here and load the about component and hit enter. Again, it imports that for you automatically up here. If it's not already imported. The other one here is the flights. They show all the lists of the flights. That's the URL. This pattern here must match your routing pattern. Like, I think we have a navigation for this as well. And our nav, if you look at the navigation component, we have, we did this last week with a URL. We have a list of data. And nav module models right here. Okay, it goes to the flights. So make sure this flag you're here doesn't match your pattern. This not take precedence. This one here, these one takes precedence. If you don't match these patterns, your navigation will not work. So these patterns here depend on your route. And now the other way around. So these take over. So that's going to go to the flight list component. That's this guy here. Add another one to compress the old shift down. And this is going to go to the edit. Well, yeah, add flight. I think I just call it add. See, yeah, just add. Okay, so add flight. Here we're going to have another component which you don't have. We don't have it yet. Okay, so we're going to. Yeah, you're going to create a component. Because you don't have it. Well, we can create that now. So let's go over here to this terminal and add a component. So ng gc. I call it a flight. So say add flight. No, I'm sorry. Add dash flight at a single flight only right. And I don't want to test skip tests and skip the style sheet. All right, done. So we have an app like component. So now we can go in import that app like component at flight component. Here it is. It goes to the page is nothing there yet. Just a simple text. It just say apply works. And then we have one more for the edit. Okay, even though our navigation does not have it. I just know edit here. Well, we get it edit from the form. The list. So if you go to the list component, you see the bottom of your code here. There is a link to the edit page. Okay, so the edit here is the URL takes an ID. That is the pattern. So therefore, and our navigation, we're going to say. Edit slash colon ID, just like express before. Remember to get that. So this ID here is a parameter you set. It does not need to call ID. It could be called like, you know, flight ID, whatever. So what do we use here? You must also remember to retrieve that when you load it from the browser. Okay, so, but it's commonly called ID. Or flight ID or, you know, course ID or student ID, right? And this is going to load the edit component, which again, we don't have. So again, you don't have it. We're going to create one. So let's go and create another one again. And this time I'm going to just up arrow and go change it to say edit. We're going to edit only the single flight. So it's singling, right? Again, it entered. We get our components all done. Now we just need to load that edit component, edit component, edit flight component. And there we go. So we get all our URLs that we need. And we get our catch all down here. Just make sure it's at the bottom. Then we are going to go. Okay, so let's say this and go back to the browser. So here we go. I'm going to remove this ABC here. It looks kind of ugly. Okay, I'll make it a little bit bigger. It is a be here. I don't like that. So let's move those. I tested last week to show you that your nav does work. So it did at the nav. Now another model in the nav component. I'm not here. Yes. I mean, HTML, right? We added the a bbcc here. So we move those texts here. You don't need that anymore. Okay, so now it's clean. Right. So this is the home page. As you can see takes to the home page. This takes the home page to slash. Okay. I want to clarify one thing though. I want to clarify one thing. Remember that when I mentioned that in the routing, you don't put a slash here. Okay, you don't put a slash here. If I put a slash here, what happens? For example, I say that put it here. You go to my page. You see that it doesn't work. It crashes. Right. If you navigate to F12, it says this is invalid path cannot start with the slash. It is. That's just the rule of Angular. It doesn't mean that every frameworks have this problem. Express uses the slash. You have to put a slash there. Angular does not use it. So just make sure if it's the root directory, root path, don't put the slash here. Okay. So here, again, here, you don't put slash. I don't put slash home here like that. Right. If you notice again, we go back and see the same thing. I got an error. Cannot start with a slash. Okay. Because if you do that, I mean the underlying code would think this is the root, root of your page. So it doesn't work that way. It has a conflict just like how you go to a URL. Right. And remember it in regular HTML. If you put, for example, if you do this, you know, let's say image and SRC is equal to slash. You know, I am G slash a that JPG. Right. You do that. This last year means it's the root directory. It is not the relative path. So usually you don't put it here. Right. You will just put an image and then slash a JPEG. Okay. So that's the sort of difference between the slash and what are the slash. Right. So slash will start from the root directory and you may not find your image. So that's why you had a problem. So Angular tries to prevent that from happening. So therefore you should not put a slash here. If it's the root, if it's starting from the root, if it's not on the root, then yeah, you can put a slash after that. That's fine. It's required. But if it's the root and don't put it there. So your path, you can't put it here. However, your navigation, don't confuse with your navigation though. When you create navigation like HTML stuff, you can put slash. You treat this just like regular HTML. So notice here, and when we're on navigation, HREF, we load the URL here. Right. And out of NAT data, so in our NAT data, we have the slash in there. Okay. These are not pattern. These are not URL pattern in the framework. This is just actual URL. If you were to type this on a link, that's why you put slashes here. Either you put it here and here, or you add it here like this. Right. So those are okay. And it can be confusing. So let's make sure you differentiate between the two. Okay. So we got our pattern done, all set. And then now, again, let's go back and test our application. All clean now. We move those A, B stuff. If I now navigate to about. There it is. It loads the about page. Navigation stays. The footer stays. The content is only rendered in that routing outlet. Right. I go to the flights. There is the table. Okay. So your content stays. The footer in that state is the same. As flight is nothing there yet, but you're going to add a form, a form that will add all at one record. You would have all these fields in there. So you can add it to your list. And when we edit, if you click on edit now, you see that it loads the edit page. Again, it loads the URL. Well sticks is we're going to grab this index one. Well, this case not index, but with the ID, the actual ID of the flight. And then not the flight number ID, because we call it ID. And then we load that ID. It will pre populate the form, which will look very similar to the, to the app light. If you remember, you, we did the Ajax form way back in web two. We added the book stuff. Right. Same idea. Yeah. We formed the loads with book content. And you pre-filled those fields with the data. So the same idea here this time though, we're using Angular instead. Okay. And you will see that it's quite different. And, and because we're using data binding, if you remember data binding, you'll bind date, you'll bind to an input tag. And so it's quite different from the traditional way of doing things. All right. So now if you notice one thing though, when I navigate to a page, right, the page refreshes, we loads, it flashes to the arrow here, refreshes to go to the about, right, it flashes. Okay. So usually you don't want that. You want that to be very smooth. Okay. You want to be no, no, no refresh, no reloading the URL changes. The content will change, but the page will never be loaded. Okay. In Angular, you can do that by changing your route. Like up here. The, the nav component right here. Close this. Okay. So everywhere where you have a link, like the anger link, or anywhere that is going to load a navigation link, you want to add this directive to prevent that from refreshing. You can put anywhere in the, in the tag here. So I'm going to put right in here. It's called a router. You know, I don't remember what that, what that thing is to say link, it's a router link. Let me find it. There is either it's on my notes or somewhere. I can't remember. Let's find it. It's an easy one. It's just a very simple. That's a very simple. Let me find it. And now I have it somewhere. Let's see. Navigation. Yeah, it's called the router link. Let me go to Angular and we'll look at that. Angular router link. Okay. That's the one I want to use. Okay. And their content page. It's really slow. I want to show you the notations. You can use it. You're going to replace, you're going to replace the HRF with the router link directive instead. Okay. So here the router link allows you to add links to your page and it will manage by Angular. And so that it doesn't have to refresh a page. It doesn't help me much here. Okay. Let's see. Maybe down here. Okay. Like right here. Okay. So you will use something like this instead of, instead of saying HRF equals that URL, you replace the HRF with the router link. Right. You don't have to put the brackets around here. So you don't mind this way. You just put it directly equal to, well, this is binding using the score brackets. You also bind using the color braces. If it's one of the other way to remember routing. So I guess what I mean is, let's see. Yeah. So if you go to the link here, right? So here instead of HRF, we're going to say router link equals that. Okay. So now it's going to bind this navigation link to the router link component or module. And it will manage that for us. And we do the same down here. So all the HRF will be linked to control by Angular. He passed. We place it with a router link. Okay. Remember you do it this way with a curly or if you bind this side, then you cannot put curties over here. Okay. Remember one way or the other, you cannot do both. It should not do both. Okay. So since we have this way is usually commonly do this way. All right. So I'm doing only for the navigations. All the links and navigation will be kind of like that. Let's see if it makes that difference. Now let's go to the browser and load our application here. Okay. Refresh it first. And if I click on the about page, I made a mistake somewhere. I'm actually import something. Let's see. It's not working because it's an error. It does not know the router link. I have to import that to the module. Let's go to the app module up here. And we need to import a module called and the enforce router link. Okay. Right here. Router link. We need that to be imported and the root module and module. You type it in force right down here. It should automatically import. You put it for us here from the router. But you need that to manage the routing. So say that again. And let's try one more time. Here's our app. Okay. I might have to reload my page. Let's see what the errors are. Okay. So let's cancel this around again. Okay. Sometimes you have to run again and you serve. Hopefully that fixed fixes the error. Okay. I'm missing something. Routes. Routes module. Okay. I'm missing something here. Let's see what's going on. Let's see. I have here. A component. No, not that one. See something really quick. Role module is there. And I'm going to look at my app component. Add module. I'm missing one thing. I'm pretty sure. That's why it's not recognizing me. And let me find it. Add module. Role module. It's there. Map module is there. Map component missing something. All right. Let's see. Routing module. If I can't figure it now, I'll do it next time. But for sure. I think I got everything in already. I'm not sure why that's not working. Yeah. It looks okay to me. If this routing link doesn't need it, then probably don't need it. But let's see. Role. It's not going to process code. Jesus. Is that compatible? Okay. Is that compatible? Maybe. Hmm. Okay. Let's remove that. It seems like it's not compatible here. Interesting. Let me delete this again. Yeah, it's not working now for some reason. It doesn't recognize the route. I'll figure it out. Okay. But it's the way you do it. You're going to change that. Navigation to use the router link instead of that. Unless. Unless they change that in the new version, which I'm not aware of. I don't know what I'm going to do here. It shows differently today. Change it. Hmm. Okay. Well, yeah, I'll figure out next time. Okay. Cause I know it should. It should work. I'm probably missing something, or maybe the updates. I mentioned that I always updating stuff. And that's the case. Then that's the case. But, um, yeah, it should, it should work the way we have it here. Um, but let me try this way. What they had to this. Okay. Let's go back to just the old href. I'll try just the homepage. Okay. Any errors in my script? No. Yeah. So it doesn't recognize it. And I'll figure it out. I thought I had it, but. Guess not. Okay. We'll fix it later. All right. So, uh, we get our navigation, um, all set up. And. Yeah. Okay. Anything else that we need to add to these routes? Uh, we're not going to learn how to fetch the ID yet. Okay. You do that next time when you build the edit page, there is a way you need to access the ID. So you can load the content. All right. Um, so. Yeah. So basically let's say it about navigations. Okay. You put it here. And then you export them out. And the order here is not important. I can move this around. Doesn't matter. That's what they are. The only thing is that this must be, um. Must be the last one here. And in this case, yeah, this, this important, the order for this one is important. But the one above is nine point. It was still going to go, you know, one at a time to find it. Uh, but at the end, the last one here is important. And normally it's not right for URL in this case it is.