In this lecture, we are going to talk about the content children decorator for helping us select elements
inside our template.
The goal of this lecture is to find out how many tabs are in our component.
As we've discussed before, our times component should be flexible.
It should be able to render two tabs or 20 tabs.
Open the tabs container template file.
The container needs to know how many tabs are inside this component.
If we look at the top of the template, we have an unordered list element.
This list contains the links to the various tabs.
Therefore, we need to know how many tabs there are.
If you want to render links to them, here's the problem.
The tabs are not directly added to the component.
Instead, they are projected from the parent component.
The projected content will replace the energy contents element in our template.
We need a way to grab the projected content.
This is where the Content Children decorator comes in to play the content children decorator allows
us to select elements from projected content.
It's super simple to use.
Let's give it a try.
Open the Thames container component class file.
We are going to import the content children decorator function from the angular slash core package.
Next, we will create a property called Tab's.
It will be decorated with the content children decorator.
The content children decorator must be called as a function, this function has one required parameter.
It's an element we'd like to select from the projected content.
We're not limited to selecting elements.
We can select components to be absolutely clear.
This decorator targets projected content.
It cannot select elements from the entire template of the component for our scenario.
It's perfect.
We are trying to select the tab components, which are sent down as projected content.
We need to pass in the tab component class.
The editor should have automatically imported the tab component file, if not manually import this component
class.
One last thing we need to give our property in initial value, we will assign this property an empty
object.
Let's verify if we can grab the tab components by logging this property.
Inside the kng on an ID function, we are going to log the tabs property.
Next, let's refresh the page.
Under the developer tools, open the console panel, if we look closely, the log will output an empty
object.
How mysterious we should have received a list of our tab components.
It's not a problem with our decorator.
The reason we're receiving an object is because of the lifecycle function we are using in our component.
Let's review the life cycle functions.
It's been a while since we've talked about them, the energy on init IT function will be called when
the component has been initialized.
We will have access to the properties and methods in our class.
This includes input data.
However, we don't have access to our projected content during this lifecycle function.
The projected content hasn't been initialized yet.
We need to wait for the initialization of the projected content.
Angular offers another hook called N.G. after content in it.
This hook runs after the projected content has been initialized.
It's the perfect time to start working with our tab components.
First, we will implement an interface for this hook in the import statement for the angular core package.
We will replace the on init interface with the after content init interface.
We won't need the on in it interface.
It's perfectly fine to replace it.
Next, we will replace the interface on the class with the after content in interface.
Lastly, in our class, we will replace the energy on init function with the energy after content init
function.
Let's refresh the page in the browser.
This time, the console will output an object called query list.
The query list object contains information on the elements selected from the content children decorate
or function.
If we look inside, we will find a property called results.
It's the only property we care about.
It contains an array of tab components.
There are two tab components.
It matches the number of components in our app.
Perfect.
We've successfully retrieved a list of tabs inside the container.
If we add more tabs, the decorator will always return the correct amount of tabs.
Furthermore, it can scale with any number of tabs in the next lecture.
We will continue working on our tabs.