At the beginning of the KERS, you've seen how to access a stealth component from templated using template
reference variables, but what if you want to access from child to parent?
Eagler recommends using the couple strategies like bindings and services.
But sometimes it just feels right that a company and have their access to another component.
It is like the with an example of this case is that Tharp's component, looking here into my son's folder,
the components that and tabs that I'm not using yet, I'll use them now to devote my time as be adding
a couple more tabs to see how it looks like.
So I open up component.
It's the email.
I remove this either from here and instead I put a tabs component.
App taps that entire two and a half three taps the app timer up the app with title times.
Then the wrapped up with title Crono, for example.
And another laptop that is going to have the album title, I'm not going to implement the content of
those two steps because I Apple created them so you can see how this component works.
First of all, as you can see, this laptop has an input called title.
So if you go to the definition of this component in have components to S.
You can see that the top companies also have two properties, the title that is any import of type string
and the is active bull in detention.
Also in this other little subcomponent implements a interface.
This is convenient to the couple, the type component properties for smaller components.
And you will see now what I mean with this anyway, Open-top, that interface, that is where you can
see how an interface looks like.
This is a simple declaration of the properties that that component have made.
Other components have the properties is active and title, of course, interfaces.
It's not something directly related with components, but at all the typescript provide us in order
to better the couple of code.
So how can I benefit from interfaces?
OK, if you have and types components, you can see that this company can have an array of top elements.
Those elements are the top component child elements that some way I have to pass to this array as I
have not shown you had the Z4 for and I have created some fake daps, as you can see here in the engineered
method.
As you can see, I'm using tap all the time instead of tap component.
That cell component representing a single tap I'm using tap its interface everywhere and the tub arrays
in the app, that method the sector method and using the tap interface instead of the tap component.
This is what allows me here in the engine in it to call the method ATAP with that simple objects like
those from here that have nothing to do with the kemppainen.
It's just the two properties plain object but compliant with the tap interface.
I mean it have the is active and the title properties.
So my method acttab am I right.
Tabs don't have any problems accepting this plain object.
OK, so my taps company they have a taps array and what does it need them.
Well if you open the taps component template you can see it.
There's a list with the title of each and every one of the taps.
The state title you can see here.
Remember that four is repeating the element where it's used in this case, the element for every tap
in the TAPS array.
Also, combining the anti directive to set the active glass to the element in case that the property
is active of the type it's through.
Finally, I'm doing also binding to the Kikki band, so when the element is clicked, the selector method
is called passing the top item of the element.
Besides creating a list with all the taps, as you can see here, we are also projecting the content
we are receiving from outside into the next thip.
So if we are to see the results right now and remember that at this point, we're using fake taps instead
of the taps gridding in the template, the graphical output or just the four fake taps at the top.
However, those taps created from playing objects are fully operational, so I can tap on the selected
state changes accordingly from one to the other, including, of course, the success expected changes.
OK, using the inspector about the app taps, you can see here that there's a list of elements with
the title of those fake taps and below there's a live with this content class and inside them is where
the real taps are placed.
It in fact, those three taps at the taps I want to use.
Let's go back to the cold for a moment just to see the app taps inside.
We have those three tap components.
That is the content that is being projected inside the parent component.
Well, I have to connect those taps so that I play as much as the real content that components the tears
to remove the fake taps from engine in it.
Of course, doing this and removing any visible taps from the results back to the tobacco company,
the parent company that will host every time I have this at the method that allows me to add any tap
to my array and want to use it from the children taps so they can add to the pun by themselves.
So I open tap components and the mechanism Anguilla gives us to access part components from the children
is very simple.
It's using dependency injection.
So my constructor, I only need to inject the parent types components so angular can play its magic
to me.
The reference at a public taps of type taps component.
Of course I need to import this class and now I have access to the parent company.
And the other thing I'd have to do from every tap component is to have himself the Pantelis list.
There's the taps, the component, the at the method and the reference to the tap.
Every tap will do this and in it.
Now if we go to the results, you can see that the graphical taps matches exactly with Tapson titles
I've set in the template.
However, I still have to separate the content I want to show with a writeup right now.
It doesn't matter which step is selected.
I'm always saying the same content like the parent apps component.
Every Child Tap is also doing candombe projection with the content, as you can see in the top component,
and played this already at the end of content.
So what I have to do is going to the Mambu and just move all the time inside the first step.
And I'm confident I make my first step and I kept the time loop as well as the Atherden and they place
them inside the top as.
Also, I'm going to have a little description on the other tabs so you can easily see how the country
is changing from one tap to the other.
I here, Crono not available and here I am not available.
So back to the results again.
You can see that now all the content is spliced together and that may be on the has grown unavailable
a lot, not available and sending to have the same results.
That's OK, because right now I have no logic to show all of the content of the active tap.
Back to the cold, I can solve this on top, come on.
It's the smell by adding a structural directive called and if that will only work when there is active
property is through what I have to live with this is to place the content of the element inside the
dome only in case that the conditions specified is through.
So here I'm using the executive property of my tap.
Remember that old taps have this property that reflects if the tap is selected or not.
Back to the results again.
You can see now that when the timer is selected, I elicit atomic components, but if I change my tap,
the content changes depending on the type selected.
I've add new components during this video and this may have done your understanding a little more difficult.
So I will summarize it to make sure it's crystal clear.
I have some taps to my Mambu in components XHTML.
This app taps component as well as the active components inside without S of taps.
The pond is projecting all this content.
Everything inside here using energy content and every single laptop does the same stuff, projecting
its sound content.
The key point of the app taps component is that it have a list with the details of all the taps it contains
in order to show the titles in the Taps Bar or the content in order to update this list.
It has a method called ATAP.
As you can see here, there's this method, the children component, and it's access to the parent.
That's why that component in passing the parent provider in the constructor, but dependency injection.
So later f a reference to the parent company.
And this way I can use its abfab method from any child in order to register it and make sure the title
of my tab is shown.