You have seen how to embed some content from outside of your company to make it reusable, but what
happens when I want to emit more content like title on the buttons?
You might think that following the same structure that instead of the component, the result could be
the same.
Let's give it a try.
Just copy the header from the old view and try to omit it here on top.
Just changing the title.
If you go to the results, you can see that it is not exactly what you're looking for.
My title is placed here with the rest of the message and this makes sense.
It displays inside my message class element because here's where the energy content lives.
But there's a solution for this case.
Injection --'s allows you to tell the component where it's piece of projected content and be placed.
Where you have to do is write down one energy content on every place.
You want some content to be projected and then use the selectable to clarify which content goes there.
So if you want to parse the title from outside, just change its title for energy content.
And inside this you have to create value with a select attribute that what you want to put inside is
any projected content with the header class.
If you look at the parent component, I'm projecting this title using a dip with the glass header back
to the results I click at, and now you can see that the projected title works as expected.
But I don't really recommend to you to use classes as selectors.
This select from here is quite similar to acquire a selector.
So instead of a class, you can use also any HTML element or component that's just, for example, a
healthy tag.
And they change the template, the product and its three element.
So the content of my ellisville will pick up automatically these three elements.
So I got exactly the same results as before.
So I click add and I got here my title with subtitle style changes because it's applying also the head
of three styles.
I can also use attributes, for example, I can to back this hill three to simple flip and add here
the header attribute.
So then in the end, the content of my view, I can just select the projected elements with the header
attribute.
So now I'm detecting this header attribute indicated with brackets.
And then when I showed the out of you on the browser, it's going to place here my title, because now
it has identified the content using the header attribute of my element.
I can use Canton's lots as many times as I want.
So in my view component, I can do exactly the same with the buttons.
I get this Bowdens from here and replace them by a new energy content.
This energy content will use a selector any Booton elements.
So now I move to the parent component and use the content projection to animate those buttons inside
the alert and then worry about the order because anti content will search for those buttons and will
place them in the corresponding slot as the template level.
All the elements projected will work exactly the same as all the elements.
So you can use a properly bindings and even the bindings exactly the same way as you can see, my buttons
belong now to the parent template.
So I combine the Cancelable don't click event directly to the head time method and I will remove the
OK button click event for now.
I can upend also all of the components and remove those two outputs because now my ballot does not have
buttons.
So it is the parent who's handling those events.
So I remove this and I move to the template of the parent component in order to remove the council and
submit events from the adult video because they do not exist anymore.
OK, and projecting a bit with the header attribute was text will be at the timer.
You can see how many buttons here.
So this is my absolute view and I'm just projecting inside a header, a level and an input element that
will be placed in the end account and that do not have select.
And finally a couple buttons to the results.
I click that button and I can see my title, the message in the middle and the council and the K buttons.
So my buttons have been projected as expected, although I've lost some styles on the way.
If I click the cancel, but it closes my be as expected.
Council wouldn't have lost that style because of the encapsulation we have already talked to solve this.
I will just get this style I was using inside the output component for this button and I'll be accompanied.
SCA says I was applying the style to the council, but when I get this stuff from here, because now
the council does not exist inside the Albi component, this button is being created directly in the
template of the paint component.
Sewing up component success pays the style for the council, but basically emerging and some colouring.
If I check this now in the browser, you can see that my cancer looks the same as before, so I get
the same design from the beginning.
Let's quickly rebuild this video.
Heftiest and accountant, the accountant from outside of the company and the accountant is written on
the parent company.
Thanks to Kenton --'s, you have been able to decide where each of the projected content should be
placed.
You can use content slots or not.
However, you can only have one energy content without --'s and any projected content that do not
match and is will be placed there if it exists an otherwise, it will not appear in your component in
practice.
And to allow you to create a companied component for labor proposes that you can use in a generic way
with different content.