This course has been updated! We now recommend you take the Angular 13 Fundamentals course.
Transcript from the "Component Routes" Lesson
[00:00:00]
>> What we have here is essentially the boilerplate starting piece. Now I'm going to Talk about a couple things. And I have to, I kind of have to hint at a couple things initially, before we really get into a full fledged kind of a standalone module. But there's a couple things I'm going to touch on.
[00:00:27] Just so we know what's happening. In our HTML, you'll notice we have this router outlet. And if I take this away. Let me just go back to our html. Notice that nothing is in here. If I go back to my code, and I put this back in, and we refresh the page, notice we now have a component here.
[00:00:57] Well, what's happening? So the other way to get a component onto the page is via a route. And how this works is if we look in our routing module, we have essentially this routes array. And this has the simplest route. And this is as far as we're going on this.
[00:01:25] But I want to show how this is working, is we have a path, it's home. We have a path courses. And we're attaching it. We're assigning it a component. So the simplest form of a route is a path and component. And it's just an object. And what that's saying is, when I go to this path in the URL, take this component and put it in the router outlet.
[00:01:56] And so you'll notice here, if I go back to the browser it's saying, okay we're at home. So it's examining the path in the URL. And saying I recognize that. And it's putting the home component into the router outlet. If I go to courses, you'll notice that it's saying I recognize this.
[00:02:18] And it's putting the course component into the router outlet. And so this is how we are rendering these components is we switch from kind of route to route. It's matching that path. And just dropping that component into the router outlet. And so what I can do here is in the router outlet, because it's just rendering, I'm just gonna do an h1.
[00:02:48] Hello workshop. There we go. I'm gonna save it. Hop back in. And you can see it's just rendering. So it's a router outlet is really just another angular component that just receives a dynamic component and renders it. And so that's how that is working.