Router outlets - lordoftheflies/angular-essential-training GitHub Wiki

So the application now has some routes configured to some components, but where are those components going to get rendered at when routes are matched? Well, the angular router module has a router outlet directive for just that. Router outlet is a structural directive. It targets an element with the name router-outlet. In the app.component.html file, we can add a router-outlet element where we want the component to be loaded at. So let's replace the mw-media-item-form, and mw-media-item-list elements with a router-outlet element. The router will change the component at this spot based on the route match. Let's switch to the browser to see this in action. We can see the list of all media items showing up. This is the default route matching and causing the media item list component to be loaded. And if we inspect the dom, we can see the router-outlet element with the mw-media-item-list element loaded as a sibling to it. Notice in the address bar the URL has the all segment in it. That is because the default route does a redirect to, and sends it to that segment. If we change the URL to /add and hit enter we see the form loaded. And if we inspect the dom, we see the mw-media-item-form element loaded as a sibling to the router-outlet element. Let's change the URL to be /movies and hit enter. We see the list again, and if we inspect, we see the media-item-list element loaded in. Note however, that we see the full list here. That's because we haven't made use of that route param yet. We'll be doing that in the upcoming lessons. One other thing here, we have some list tight navigation as part of the media items list component markup. With the addition of the routing, we really want this to become part of the main navigation. So let's go into the code and move that up to the app component markup. Over in the media-item-list.component.html file, we'll cut this nav element, and then open up the app.component.html file, and paste it into the top of that. Then let's remove the click events since they are not needed here. Now we have the navigation markup moved out of the list component and ready to be used for the main navigation of the application, and to be wired up to work with the router.