All language subtitles for 5. Importing and Exporting Modules

Now that we have a couple of different modules inside our application let's figure out how to actually

effectively use these modules in share code between them.

The first thing we're going to do is generate a new component inside of our elements module.

The goal of this component is to eventually show all the content you see right here.

I want to show something says segment one show a segment component is right underneath that and then

show a little place holder component inside there as well.

That's what we're going to eventually do.

But right now I just want to generate a component that's going to eventually show all this content when

we generate this component.

We're going to specifically create it inside of the elements module to do so we'll go back over to our

command line and inside of our project directory we will once again run energy generate component.

And now rather than just writing out the name of the component we're going to generate we're going to

first write out the module that this should be placed in by want to generate something inside of my

elements module.

So I will write out elements slash and then the name of my component.

In this case I'm going to call this component elements home because it's going to serve kind of as like

the home screen of my elements feature I'm going to write out elements and I'll zoom out for just a

second so you can see that entire command on one line okay.

So I'll generate that I'm going to go backwards my code editor and take a look at what was created inside

of my elements directory I'll now see it there is an elements home component there's the component right

there.

Now let's try to take this component and show it on the screen of our application to do so.

Remember pretty simple process all we have to do is go to our app component and inside of our app component

we're going to write out some little H2 mode looking tag that's going to try to show the elements home

component on the screen to get started going to first once again select everything inside of my app

component template except for all the way down at the bottom.

And notice that there's now additional little tag right here called the router outlet.

This was added in specifically because we generated our project with routing enabled.

We're going to discuss exactly what this thing does in just a moment but first let's just delete all

the other stuff inside of here then right above that router outlet thing.

Let's try to show that elements home component by we'll write out app elements home like so right away.

I'm seeing an error message start to appear inside my editor.

If you do not see that error message that is totally okay.

Let me tell you exactly what is going on here.

So back over at this diagram just a moment ago we generated a new component inside of our elements module

called it elements.

Whenever we generate a component inside of a module no other module inside our application can get access

to that component by default.

Instead we have to form a specific link from the elements module to the app module.

In other words we have to specifically say that we want to export this component from elements we essentially

are saying hey this thing is open to the outside world.

Anyone who wants it can come and get it.

And then inside of our app module we have to write out some code that's going to go and reach out and

grab that component and imported into the app module.

So it is a two step process.

You have to first export the component and then import it into the module where we want to get it.

Remember just a little bit ago I mentioned very briefly that the module system inside of angular is

similar to typescript files where we are creating variables classes functions of what non cyber file

we can export that stuff from a file and then imported into another that whole system is very similar

to the Angular module system we have to both export something and then import it something somewhere

else.

So let's first begin by exporting the elements home component from our elements module do so I'm gonna

go and find my elements module file that is the elements dot module file inside the elements directory

then inside of here right at the very bottom of this little energy module directive I'm going to write

in a new property called exports all assign nothing an array and then inside of that array I'm going

to write out our component which is the elements home component

we have now exported the elements home component from the elements module.

We've now said hey this thing is available to the outside world.

Anyone who wants to make use this component can do so.

Now step two we have to go into our app module and specifically import everything that is being exported

from the elements module so I will now go over to my app module which is my adult module that TSA file

inside of my app directly.

It is right here and then inside of here I'm going to first write out an import statement and I'm going

to get the elements module notice that I'm importing the module not specifically the components I can

get the elements module from the elements directory and then elements dot module.

And then finally I'm going to take elements module and add it inside of this decorators list of imports

I'll put inside of here a comma and then elements module like so that this is the part where we're saying

hey reach out to the elements module get access to all the components that have been exported from it

and give us access to them inside of the app module if I now go back over to my app component each team

I'll file where I had an error just a moment ago that error message is now gone.

Let's now start up our development server we're going to make sure that we can see the app elements

home component rendered on the screen.

I'll go over to my terminal inside my project directory I'll do and serve and then after my development

server starts up I'm going to navigate to a local host forty two hundred.

As usual okay.

That should be good.

So local is forty two hundred.

Now I can see elements homeworks on the screen okay.

So I'd say that looks good again when we start to make components in the module system we have to specifically

export a component that we want to make use of inside of another module.

The Step one we export that thing up to we import the entire module into whatever other module wants

to use that component.

Let's take a quick pause right here.

Continue in just a moment.