In this lecture, we're going to set an active tab.
At the moment, both forms are rendering in the model.
We should restrict the content to one tab at a time.
We are going to keep track of an active tab by adding an active property to the tab component.
The container will check each tab component.
If the active property is true, it'll render that tab respective content.
Let's get started.
Open the Tab Component Class file.
We will create a property called Active, its initial value will be false.
In addition, this property will have the input decorator.
We should allow ourselves the option of setting an active tab.
We won't be doing so for this example.
However, it doesn't hurt to be able to set the Active tab manually.
Next, we will need to update the tabs container components, open the tabs container component class
file.
Inside the end, after content in its life cycle function, we will check for an active tab.
If they're all set to false, the user won't be able to see anything.
You may want this behavior, however.
For this example, we are always going to pick an active tab.
Therefore, we should verify there's at least one active tab.
It's also possible that there may be multiple active tabs.
We should prevent multiple tabs from being active inside this function.
We will replace the log statement with a variable declaration.
The name of the variable will be active tabs.
It'll be set to the this tabs dot filter function.
Even though the Thames property is a query list object, it contains methods similar to an array.
The filter function works the same as the erase filter function.
TypeScript will throw an error at us.
It's saying the tabs property is possibly undefined.
TypeScript is not sure if this property will hold the value.
Let's add the optional chaining operator after the tabs property.
Next, let's pass and an arrow function to the filter function.
We will refer to each item in the array as tap.
We will check if the Tab Dot active property is true.
The active tabs variable will contain an array of active tabs in most cases.
This array should contain one item after retrieving a list of active tabs.
We will create a conditional statements inside the conditional statement.
We will check if the filter wasn't able to find an active tab.
The conditions will be the following not active tabs and active tabs.
Dot length equals equals equals zero.
The conditions we created will check if the Active Tab array is empty, if it is, we can assume there
isn't an active tab.
We will manually set an active tab inside the conditional statement.
We will run a function called Select Tab.
We are creating a separate function for setting an active tab.
We will need to set an active tab on mouse clicks.
We should make this logic reusable.
This function must be provided with a tab.
We can access the first tab by passing into this DOT tabs DOT first property.
This property is available on the query list object, as you would expect, it holds the first tab in
the list of tabs.
We may get an error from TypeScript.
It's the same problem as before.
The compiler isn't sure if there will be a value.
We can tell TypeScript to ignore this issue by adding an exclamation mark after the Taps property.
This operator is called the bhang operator.
It's a quick hack for telling the compiler to relax.
We are confident this property will have at least one tab.
Time to define these select tab function.
The Select tab function will have one parameter called tab.
This parameter will be annotated with the tab component object.
Before reset the active property to true, we should set the active properties in the other tabs to
false, otherwise we may accidentally have multiple active taps.
We will loop through the tabs to achieve this effect.
We will add the following code.
This Dot tabs question mark.
Dot for each.
Inside the for each function, we will pass in an arrow function.
Each tab will be referenced as tab on each iteration.
We will simply tab dot active property to false.
This line should turn every tab off after setting every tab off, we can set the active property.
We will set the Tab Typekit active property to True.
We will make one more change.
Users should be able to change the Active tab.
Luckily, we've outsourced the logic for changing the Active tab to a function, so we'll be able to
reuse it on mouse clicks.
Open the tabs container template file.
On the anchor element, we will listen for a click event.
If the click event is emitted, we will run the Select tab function with the tab component passed in.
We're finished.
Let's check out the model in the browser.
At the moment, both tabs will appear the same, we all use the developer tools to help us verify if
there's an active tab under the Components tab in the angular panel.
We should be able to find our tab components.
There should be two if we look inside the first tab component.
The active property is set to true.
I'm going to click on the second tab in the middle as I do, so the active property is set to false.
If we move over to the second tab component in the developer tools, the active property has been set
to true perfect or able to set the Active tab in the next lecture.
We will begin changing the appearances of the tabs based on the active property.