1
00:00:00,150 --> 00:00:06,390
In this lecture, we are going to loop through the list of taps links should be generated by the tabs

2
00:00:06,390 --> 00:00:07,650
container component.

3
00:00:07,950 --> 00:00:13,740
After rendering the links, we will make them active by allowing the user to switch between tabs.

4
00:00:13,980 --> 00:00:17,700
First things first, we will loop through tabs in the template.

5
00:00:17,970 --> 00:00:20,490
Open the tabs container template file.

6
00:00:22,930 --> 00:00:27,880
Inside the unordered list elements, we have to list item elements.

7
00:00:28,090 --> 00:00:31,870
Remove the second list item element when you only need one.

8
00:00:34,370 --> 00:00:41,420
On the first list item element, let's apply the energy for directive it will hold the following expression

9
00:00:41,600 --> 00:00:43,760
let tab of tabs.

10
00:00:46,130 --> 00:00:52,040
We will reference each item in the list of tabs as tab with those changes in place.

11
00:00:52,100 --> 00:00:53,480
Let's check out the modal.

12
00:00:54,830 --> 00:00:56,330
Both tabs are appearing.

13
00:00:56,600 --> 00:00:58,670
They have the same appearance and title.

14
00:00:58,970 --> 00:01:00,860
We should make these towns dynamic.

15
00:01:01,070 --> 00:01:02,630
Let's start with the title.

16
00:01:02,870 --> 00:01:07,010
Open the authentication model component template file in your editor.

17
00:01:09,610 --> 00:01:12,610
We are going to configure the title through inputs.

18
00:01:12,910 --> 00:01:15,400
There are two options for adding a title.

19
00:01:15,670 --> 00:01:18,730
We can use content projection or inputs.

20
00:01:19,180 --> 00:01:23,800
I think for this scenario, inputs would be the more straightforward solution.

21
00:01:24,130 --> 00:01:28,390
Either way, feel free to use whatever solution you think is suitable.

22
00:01:28,660 --> 00:01:33,760
We are going to configure the title through an input on the first tab component.

23
00:01:33,940 --> 00:01:37,540
We will set the Tab Title property to log in.

24
00:01:40,260 --> 00:01:46,110
The second tab component will have the same property, but the value will be set to register.

25
00:01:48,600 --> 00:01:51,850
We are going to refer to the title as tab title.

26
00:01:52,140 --> 00:01:59,640
Next, we are going to update the tab component to accept the input, open the Tab Component Class file.

27
00:02:02,210 --> 00:02:06,890
Import the input decorator from the angular core package.

28
00:02:09,320 --> 00:02:15,440
This decorator will help us accept input data from the parent component inside the class.

29
00:02:15,650 --> 00:02:19,370
Add the tab title property with the input decorator.

30
00:02:19,700 --> 00:02:22,460
The default value should be an empty string.

31
00:02:25,130 --> 00:02:31,940
By defining this property, we will be able to access it in the loop back in the tabs container component.

32
00:02:32,060 --> 00:02:37,160
We will replace the static text inside the anchor element with an expression.

33
00:02:37,520 --> 00:02:41,660
The expression will be the following Tab Dot Tab title.

34
00:02:44,250 --> 00:02:48,420
Being able to access components properties is very interesting.

35
00:02:48,750 --> 00:02:54,060
Angular is smart enough to understand that we want to access the components properties.

36
00:02:54,450 --> 00:02:56,970
There's one important note about this expression.

37
00:02:57,330 --> 00:02:59,040
The property must be public.

38
00:02:59,310 --> 00:03:01,920
Otherwise, this expression will not work.

39
00:03:02,310 --> 00:03:02,820
All right.

40
00:03:03,000 --> 00:03:05,250
Let's check out the model one more time.

41
00:03:07,910 --> 00:03:11,030
Both tabs are rendering their respective titles.

42
00:03:11,270 --> 00:03:15,500
We've successfully looped through the tabs in the following lecture.

43
00:03:15,680 --> 00:03:19,250
We will begin toggling the contents of the tab container.