Like we just discussed in this video, we're going to start to create a new module that is going to
be a widget module not traditionally inside of an angular application, a widget module.
We're going to name the shared module, though, in a tremendous number of production, singular applications.
You're going to see folders or modules called the shared module.
And these are always going to be widget modules that have some number of reusable components inside
them.
So you and I are going to create a module called a shared module inside there.
We're going to create a divider component.
We're going to immediately use that inside the elements module that will also eventually use it inside
of collections as well.
Again, inside this shared module, we're going to have a bunch of reusable components that are going
to be used on different pages of our application.
So let's get to it right away, back inside of my editor.
I'm going to run and generate a module.
We're going to generate a new module called Simply Shared.
And inside there, so angry generates a component inside the shared module, so shared.
We're going to create a new component called divider.
All right, so let's go work on the implementation of that divider.
Back inside my editor, I will find the shared directory.
Here's the shared folder right here inside there is our divider component that we just generated.
Inside of that, I'll find the divider templates.
So inside of here, for right now, I'll just put in a div with a class of UI divider.
And we probably want to show in each one as well.
And we definitely want the text that is going to be displayed inside this, each one to be customizable.
But right now, let's just throw some fixed text inside of here.
We'll put in something like allow me to be customized like so.
Now that we've got at least some start for our divider component, let's try to use it inside of our
elements module.
Remember, by default, all these different modules, all the code inside them is segmented.
We don't get access really to the stuff inside of each different module.
So if we want to use this divider component inside of another module, we first have to export it.
And then inside the elements module, we will import the shared module and then we can get access to
the divider component.
Let's do this step by step.
The first thing we have to do is export the divider component from the shared module.
Remember to do so, we will find our shared module file.
Inside of here, we will find our energy module directive.
And I'll add on exports.
And inside there, I will list the divider component, which has already been imported into this file.
It's that step one, it's now step two.
We're going to make sure, OK, wrong little thing right there, that's better.
We're going to make sure that the elements module attempts to import shared module, that we get access
to all the exported components that have been declared inside their.
The inside of my elements module.
Here's the elements folder inside there, I'll find the elements module file.
I will add in an import or shared module.
And I'll get that from up one directory, so again.
Shared, shared, not module.
And I can add the shared module to our list of imports or put in shared module.
Like so.
So now inside of my elements.
Module, all the different components inside of here.
I can now freely access or make reference to any of the components that were defined inside of shared.
So in this case, well, what we really care about is the divider.
I'm not going to go back to my.
Elements hone templates, here's elements, home elements, home component, HTML, here's a little
bit of syntax that we want to replace.
I'm going to replace all that with App Dash Divider.
Like so.
I'm going to save that.
I will flip back over.
And there we go.
Now, we don't have to memorize the title or the little div with the specific class name, all we have
to remember is app divider.
That's it.
Nothing else.
This definitely works, but of course, well, we still need to actually allow that title right there
to be customized.
Now, there's definitely a very straightforward way that we can solve this using some techniques we've
already learned about inside this course.
I'm going to show you how to do it and the way that we've learned already.
And I'm going to show you a little bit more advanced.
Awesome, so to speak.
We're going to allow the title to be customized.
Let's figure that stuff out in the next video.