In this lecture, we are going to loop through the list of taps links should be generated by the tabs
container component.
After rendering the links, we will make them active by allowing the user to switch between tabs.
First things first, we will loop through tabs in the template.
Open the tabs container template file.
Inside the unordered list elements, we have to list item elements.
Remove the second list item element when you only need one.
On the first list item element, let's apply the energy for directive it will hold the following expression
let tab of tabs.
We will reference each item in the list of tabs as tab with those changes in place.
Let's check out the modal.
Both tabs are appearing.
They have the same appearance and title.
We should make these towns dynamic.
Let's start with the title.
Open the authentication model component template file in your editor.
We are going to configure the title through inputs.
There are two options for adding a title.
We can use content projection or inputs.
I think for this scenario, inputs would be the more straightforward solution.
Either way, feel free to use whatever solution you think is suitable.
We are going to configure the title through an input on the first tab component.
We will set the Tab Title property to log in.
The second tab component will have the same property, but the value will be set to register.
We are going to refer to the title as tab title.
Next, we are going to update the tab component to accept the input, open the Tab Component Class file.
Import the input decorator from the angular core package.
This decorator will help us accept input data from the parent component inside the class.
Add the tab title property with the input decorator.
The default value should be an empty string.
By defining this property, we will be able to access it in the loop back in the tabs container component.
We will replace the static text inside the anchor element with an expression.
The expression will be the following Tab Dot Tab title.
Being able to access components properties is very interesting.
Angular is smart enough to understand that we want to access the components properties.
There's one important note about this expression.
The property must be public.
Otherwise, this expression will not work.
All right.
Let's check out the model one more time.
Both tabs are rendering their respective titles.
We've successfully looped through the tabs in the following lecture.
We will begin toggling the contents of the tab container.