All language subtitles for 4. The RouterOutlet Element

At the end of the last video I mentioned that we were about to start working on some different components

but before we do I just want to have one last quick discussion about some basic navigation and routing

stuff inside our application.

But here's a diagram of what is now going on inside of our app.

At the very top we've got our app module and down at the bottom we've got the elements module and the

collections module in each of those are creating one single component.

At present neither of those modules are exporting their components collections module and elements module

no exports whatsoever.

We are only showing these different components.

Whenever a user goes to a very specific route we would refer to the elements module and the collections

module as examples of a rounded module in order to decide when to show those components.

We have our elements routing module and the collections routing module VARs you had guests.

Those are both examples of routing modules a defined some rules on Windows so each of those different

components go inside the elements routing module.

We said whenever a user goes to elements or the route elements inside the URL you show the elements

on component and likewise for collections.

One thing that is really interesting about all this routing stuff is that we never added any explicit

configuration to the app module whatsoever beyond saying Oh yeah.

Just go ahead and import the elements module and the collections module.

The second we add in those imports the app module is going to automatically see the two routing modules

and all the routing configuration that we placed inside of both them though we can really consider this

collections module thing like all this stuff right here.

It completely encapsulates the entire collections feature right now everything about the collections

Page I mean everything on it from the components that are going to be displayed on here to the URL everything

about this page right here is wrapped up inside of that collections module.

Same thing for elements as well.

The last thing want to mention really quickly is where these components are actually being created.

In other words how do they actually end up on the screen.

Well let's go back to our app component template file and I want to point out one very interesting element

that we left inside there.

The back inside of my app component template file.

Remember there's the router outlet right here.

Whenever angular takes a look at that you are L though the actual You are all that the user types inside

the address bar.

It's going to take a look at that you l and try to find some component that matches the current url.

So in my case right now I'm at slash elements so it seems that whenever a user is at elements it should

show the elements home component angular is then going to create an instance of that component and automatically

display it inside of this router outlet thing right here or wherever we place our router outlet is where

our component is going to be created.

We can actually test that very easily if we just add in some markup on either side of it.

I can add a div right above and say something like about components will be created low and I could

do something very similar right after and I can say component will be created above if I then save that

and then go back over to my browser I'll see commands can be created below there's the above and between

is the elements home component.

Again angular is going to find whatever component matches the current root it's going to take that component

and display it in place of this router outlet thing right here now that we understand the purpose of

this router outlet.

We can also start to understand how we can display some navigation elements inside of our application

such as this navigation bar at the very top let's take a quick pause right here.

We're gonna start working on this little navigation bar up here.

We're going to make sure that we eventually show whatever current component is active right underneath

it.

Quick pause and I'll see you in just a moment.