In this lecture, we're going to perform a small adjustment to the modal component.
Let's look inside the modal template file.
Nested inside this template, we have a section report the title of the model.
It has a comment above it that says Title, the title of the model sits next to the content.
So why didn't we take it with us when cutting the content over to the authentication modal component?
The reason has to do with the close button.
The authentication modal component shouldn't have to worry about closing the modal.
It's not the responsibility of the parent component to render the close button.
However, we want the close button to appear next to the title.
Hopefully, the problem is clear we need to provide a solution for replacing the title without forcing
the parent component to render the close button.
Angular has a feature called multi slot content projection for resolving this issue.
We are not restricted to a single energy content elements.
Multiple slots can be added to our component.
Angular makes it easy to add multiple sources to our component.
Above the paragraph tag in the title section, we will add another energy content element.
On this element, we will add a property called Select.
The select property allows us to tell angular which elements to project into this slots.
The value for this property must be accessed string.
It's common practice to select an attribute.
We will select an attribute called heading.
In Syria says we can select attributes by rapping the name of the attribute with square brackets.
If an element has this attribute, it'll be inserted into this energy content element.
Let's cut the paragraph element from this template.
Open the authentication modal template file.
At the top of the app modal element, we will insert the paragraph element.
Lastly, we all add the heading attributes.
The heading attribute is the most important piece of this element.
The paragraph element will not be inserted with the rest of the content.
It will be inserted at the location of the energy content element selecting this attribute.
We don't have to assign a select property to every energy content element.
We can have a default energy content element for default content.
Let's refresh the page.
The model is still working, the close button appears next to the title by adding multiple slots to
our components, we can render content in different areas of our component.
Now our component is truly reusable.
Let's move on to toggling the visibility of the component.