Angular Tab Component Overview
In this lesson we will learn about our course setup. We will briefly dive through our tabbed Angular component, which allows us to define a fixed set of static tabs. This component will serve us throughout the course as we will extend it to allow for dynamic tabs to be inserted.
Instructor: [00:00] Let us quickly take a look at our code setup. Specifically, let's take a look at this ngx-tabs component, which we are going to use throughout the entire series of this course. We're going to expand this and make it more dynamic, more feature-rich.
[00:14] Right now, what you see is, whenever we give this component inside a template, we get this as a result. We have different kind of tabs inside here, which is done by this ngx-tab. As you can see, in the first one, we have a people list, an order component, which gets displayed, while, on the second tab, we simply have some static content, and it works as well.
[00:36] The title is given by this tabTitle property here. As you can see, it gets then displayed on the top headers. If we jump into that ngx-tab here, it is quite simple, actually. We have some styling here around it. A template is nothing else than a difference inside, with a class pane, which adds some styling.
[00:55] We have an ng-content section, which allows us to project content from the outside, which is, in this case, a list or the static content, as we have seen. Moreover, there's a hidden property, which simply reacts here on this active property, which gets input from the outside. It gets controlled by someone else.
[01:14] To jump back, if we now take a look at the entire tab, which is the ngx-tabs, which groups all of these together -- let's jump into that tab component here -- here what you can see, first of all, is that we used, below here, a so-called addContentChildren of our tab component, so of our single tabs, to query basically all of the tabs that have been added here in this content projection section.
[01:37] Whenever our component has been initialized in the ngAfterContentInIt section, we query this content list. We would get all of these single tabs that have been added inside.
[01:50] Once we have those in this list, we use them here to create the header section, above. You can see the here the ul and li, which are then styled accordingly, obviously with some kind of classes. That makes up then the whole header section up there.
[02:04] Further down, we have then some additional logic. Here we basically select the first tab, so that whenever we initialize our thing, the first one automatically gets the focus. Similarly, in the selectTab, we basically deactivate all our tabs, and then we activate the first one, so that it also works, whenever we switch the tab, that tab gets focus, while the others lose their focus.