Can projection is what allows you to omit components inside each other the same way you do with XHTML,
I'm going to show you how it works with an alleged butat component we haven't used before.
And that will allows you to add new timers before going into details.
Let's add this component into the up here in app component XHTML allat a button at the end of the BU
button.
It's going to be class at in order to have some CSS as tiles at an event.
Findings to the click event to call the method show a timer.
This method does not exist yet, but I'm going to create it so I'm off to become upcoming in tears.
And here, first of all, I create a property public is a time visible that will be of type boolean.
And I said the initial battle to force this property will decide if I show the honor it or not.
So I need a couple methods to take that value.
The method public show time or whose main task is to set this item visible through and also the opposite
method.
So I grabbed this public had at timer that is going to set this is a timer visible to false.
If you look at the main module, I already imported this out to be a component.
This is the component that you're going to use.
Now, let's see, how does it look like you'll find it here and I'll be a folder and you can see that
the selector is up to you.
And I have a couple output events and Kensal here and on submit here.
OK, as I move back to my upcoming XHTML.
To my view, Campanelli, here at the bottom, I created this app, I'll let you.
I set a property binding to him then when I get the full value of my property is at miscible and also
I will call the methacrylate before to hand a campaign on the one that uncancel even this had had a
time, a method.
And now I'm going to do exactly the same for the summit event.
Coaling also had a time out method helps to care because somehow I run with the passing of the at the.
So I get it down here again.
OK, let's see the results.
If you follow my steps you should see now there's nothing here and if you click on add the all is displayed
this out we will have a title, send a message and the photo with this buttons, the cancel button that
fires and cancel the event and the OK one that finds the event and submit both events are Benetta had
method.
OK, it looks fine.
Let's up.
And now the alert to be accompanied its html.
As you can see the content of my al-attiya is completely I called it here and it makes no sense because
an IPO is a very commonly used company in any application.
Would be much better to make this Cambron generic so we can reverse it whenever we want.
Right.
Well, that's what we are going to achieve with kind of projection.
Let's do it.
I get the content of the message class and I replace it with an anti content element.
Here is what I will get.
The canon projection.
OK, I move now to the build where this all these years so I open up component and inside the out component
I pass the text.
I've have it before.
So this is the only component.
And instead here I'm going to base that content, both the label and the input.
And of course this forces me to create the time property on this component so the compiler does not
complain.
So here the public time of type no.
And they end it is zero.
OK, I'm going to the browser to the result and when I click the other button, you can see that I vote
exactly the same result.
I can use the inspector to see the resulting code and in fact it looks exactly the same.
I have this div of class message and inside I have a label and input elements.
But now the difference is that those elements are not are called it any more inside might be component,
but I'm passing them from outside of it.
I grab them on the component that is using the allit view.
So let me show you the code side by side.
As you can see, I think I'm writing inside of my other component between the app.
I want to be opening and closing tax.
All those elements inside are moved to this and you can then hear nicer.
Let me in a little bit my code.
I don't need to steal the seconds anymore.
Email it to you so I can remove some code from there.
I went out camp campaign anti -- and removed this time from here.
I remove also this time from the submit event Amede because the out is not handling this property any
more, but it is the parents property responsibility.
As you can see, everything keeps working fine.