In the Times example, you've seen how to access from subcomponent to its parent component to resist
to the taps, of course, you could have also done it in the other direction, just in the content child.
The Karradah content child allows you to access from subcomponent to any child external component that
has been projected with energy content.
And it's more powerful than Tamplin reference variables because it allows you to access the child also
from the typescript side.
OK, let's play TAPS now the other way round.
I open taps component.
Yes.
In order to use this card and tell the creator I declare here with add content child of subcomponent.
A property type of type type component.
As always, I have to import this content, the character to my file this way, what I have now is that
that property of that component and what do they create?
A content child, as in this case, is to find out some type component inside the component and play
it to sing his reference to this property.
It is important to say that they cannot use content child and at the same time inject the parent into
the child using dependency injection because this causes a circle of dependency that will break your
code.
So are you open type comments in order to remove this dependency injection?
And of course, this forced me also to remove the usage of the attack method here, because now I don't
have this reference, but that's OK because I don't want to other child taps by themselves anymore.
But I learned from the parent company is including child.
OK, then the parent component.
That's components.
I want to implement the lifecycle event after content in it.
Here.
After content in it, I also have to import it now it's over here and of course, the linta is complaining
because they have to implement this interface by creating the method and after content in it.
I need to use this lifecycle event because only when the content has been already initialized, the
parent company can detect the projectile content that we want to find with the content, tell the creator.
But important also to tell the creator reference is only one element.
That's why it's called child instead of children.
If we had several children, content channel will only reference the first one.
If you want references to all of them, what you need to do is to use the content children, the creator.
And this is something we want to see now.
But in future videos, in any case, here are just content channels.
So remember, I'll get one all the time.
OK, here in my after content in it, I will consult it if I find it.
So if this tap tap is the name of Michael Nantel Cancela.
There's the top and they will also add to my times with this at top of this tap, so I'm using the method
I already had in order to add a single tap I'm detecting with a child to my TAPS array.
Let's see the results.
As you can see, there's only one tap here, gold time.
I was using all the width and you can see the detective because there's a dark bar below that is only
display when the tap is selected.
And one interesting thing is if you look at the console output, you can see that I can access from
the parent the properties of the child in the output.
I said this, that component which is active and types of properties.
So it is expected that I can also modify the child content and it gives the child company in that any
method.
I would also be able to use it from the parent.
What else can I do from content child then?
Well, I have access to properties and methods of the child, but I also have access to any of its outputs.
I want to have an output to the single tab so you can see how does it work.
And this example and when I add to the single tap component in tap component, that is an output that
will emit every click it receives.
So it's a very simple output just to illustrate how it works.
So it read this app output click, this will return and even šemeta of type Boit, you should be able
to do this by yourself at this point because we have done it several times.
This equals and now even centimeter of type Boyte.
And of course, I have to import the output, the creator and also the event, the middle class.
Here.
OK, so at the new method to have this event.
The method click tab content and inside, I met the event with this that unclick that I made in order
to fire the event and set the template, I'll make binding to the clicky band that will call my click
subcomponent method.
So here my event finding click tab content.
OK, this won't let up.
Come on in half an hour, but I want to show you how to access this output from the parent, the depths
component using the content channel, the creator.
Instead of doing so, instead, it's employed as usual, we will do it from the typescript side and
the no simple way because even the meters are in fact, absorbable objects.
So the other thing I have to do from the band is to get subscribed to the output, for example, in
India after continue it.
I can do this, the tap that unclick and this is that trickle of the output, but it's also an observable
object.
So I can that subscribe and said I can make a function where I can do something like cancel like tap
content, claque detected.
Of course, as the company is being subscribed to unobservable, it is important to unsubscribe when
the company gets destroyed.
So I need to import the life-cycle even on this toy.
I tell my class to implement this interface.
I need to create then the Andean destroy method.
And here in SAB, I could remove the reference to my subscription, but of course I'll need to have
that reference.
So I make this private property, that claque subscription of Type A. to keep things simple and then
I use it in the end, Yeutter content in it.
Then there's the DoubleClick subscription equals to my subscription and now in undestroyed I can do.
If this that type of subscription, then in this case, this that public subscription that unsubscribe.
If we alter the results, you can see how this output is logged every time I click over the top content,
remember that the tab itself is all this, all its content.
So the TAB output is following events on every click and the parent company has been subscribed to those
events.
I called the council like some staff on every event.
So to sum up, instead of injecting the paranoid component into the stealth component, what I'm doing
now is to declare into the parent company a content child to create that property, where I told the
creator the type of element so Angular knows, what channel do I want to reference in order to utilize
my top property content child allows you to find only one channel component projected within the content.
If you have more children of that kind, it will get only the first one.
The projected content of a component is not available to the parent until it has been utilized.
That's where you cannot access it and to lift the content you need lifecycle event.
And so this method, what I have done is to add the top, the component tabs array.
And finally, what I have done is to create an output on the single tab component so you can see how
to subscribe to the TAB output from code.