1
00:00:00,330 --> 00:00:03,450
In this lecture, we're going to set an active tab.

2
00:00:03,719 --> 00:00:06,960
At the moment, both forms are rendering in the model.

3
00:00:07,200 --> 00:00:10,500
We should restrict the content to one tab at a time.

4
00:00:10,800 --> 00:00:16,860
We are going to keep track of an active tab by adding an active property to the tab component.

5
00:00:17,220 --> 00:00:20,040
The container will check each tab component.

6
00:00:20,340 --> 00:00:25,530
If the active property is true, it'll render that tab respective content.

7
00:00:25,830 --> 00:00:26,880
Let's get started.

8
00:00:27,180 --> 00:00:29,730
Open the Tab Component Class file.

9
00:00:32,210 --> 00:00:37,310
We will create a property called Active, its initial value will be false.

10
00:00:40,050 --> 00:00:43,770
In addition, this property will have the input decorator.

11
00:00:46,290 --> 00:00:49,890
We should allow ourselves the option of setting an active tab.

12
00:00:50,160 --> 00:00:52,440
We won't be doing so for this example.

13
00:00:52,650 --> 00:00:57,270
However, it doesn't hurt to be able to set the Active tab manually.

14
00:00:57,660 --> 00:01:04,830
Next, we will need to update the tabs container components, open the tabs container component class

15
00:01:04,830 --> 00:01:05,310
file.

16
00:01:07,900 --> 00:01:14,530
Inside the end, after content in its life cycle function, we will check for an active tab.

17
00:01:14,890 --> 00:01:18,910
If they're all set to false, the user won't be able to see anything.

18
00:01:19,300 --> 00:01:21,790
You may want this behavior, however.

19
00:01:21,850 --> 00:01:25,870
For this example, we are always going to pick an active tab.

20
00:01:26,260 --> 00:01:30,220
Therefore, we should verify there's at least one active tab.

21
00:01:30,580 --> 00:01:34,390
It's also possible that there may be multiple active tabs.

22
00:01:34,660 --> 00:01:39,820
We should prevent multiple tabs from being active inside this function.

23
00:01:39,880 --> 00:01:44,500
We will replace the log statement with a variable declaration.

24
00:01:44,950 --> 00:01:47,980
The name of the variable will be active tabs.

25
00:01:50,260 --> 00:01:54,400
It'll be set to the this tabs dot filter function.

26
00:01:57,010 --> 00:02:03,280
Even though the Thames property is a query list object, it contains methods similar to an array.

27
00:02:03,790 --> 00:02:07,630
The filter function works the same as the erase filter function.

28
00:02:07,990 --> 00:02:10,479
TypeScript will throw an error at us.

29
00:02:10,810 --> 00:02:14,440
It's saying the tabs property is possibly undefined.

30
00:02:14,800 --> 00:02:18,580
TypeScript is not sure if this property will hold the value.

31
00:02:18,970 --> 00:02:23,290
Let's add the optional chaining operator after the tabs property.

32
00:02:25,900 --> 00:02:29,840
Next, let's pass and an arrow function to the filter function.

33
00:02:30,220 --> 00:02:33,850
We will refer to each item in the array as tap.

34
00:02:34,240 --> 00:02:38,020
We will check if the Tab Dot active property is true.

35
00:02:40,620 --> 00:02:46,260
The active tabs variable will contain an array of active tabs in most cases.

36
00:02:46,470 --> 00:02:51,660
This array should contain one item after retrieving a list of active tabs.

37
00:02:51,780 --> 00:02:56,460
We will create a conditional statements inside the conditional statement.

38
00:02:56,640 --> 00:03:00,690
We will check if the filter wasn't able to find an active tab.

39
00:03:01,140 --> 00:03:06,480
The conditions will be the following not active tabs and active tabs.

40
00:03:06,480 --> 00:03:09,870
Dot length equals equals equals zero.

41
00:03:12,510 --> 00:03:19,290
The conditions we created will check if the Active Tab array is empty, if it is, we can assume there

42
00:03:19,290 --> 00:03:20,640
isn't an active tab.

43
00:03:21,000 --> 00:03:25,890
We will manually set an active tab inside the conditional statement.

44
00:03:25,980 --> 00:03:28,770
We will run a function called Select Tab.

45
00:03:34,060 --> 00:03:37,750
We are creating a separate function for setting an active tab.

46
00:03:38,110 --> 00:03:41,410
We will need to set an active tab on mouse clicks.

47
00:03:41,710 --> 00:03:43,900
We should make this logic reusable.

48
00:03:44,230 --> 00:03:46,840
This function must be provided with a tab.

49
00:03:47,170 --> 00:03:53,530
We can access the first tab by passing into this DOT tabs DOT first property.

50
00:03:56,170 --> 00:04:03,130
This property is available on the query list object, as you would expect, it holds the first tab in

51
00:04:03,130 --> 00:04:04,390
the list of tabs.

52
00:04:04,780 --> 00:04:07,120
We may get an error from TypeScript.

53
00:04:07,360 --> 00:04:09,340
It's the same problem as before.

54
00:04:09,670 --> 00:04:12,670
The compiler isn't sure if there will be a value.

55
00:04:12,850 --> 00:04:19,329
We can tell TypeScript to ignore this issue by adding an exclamation mark after the Taps property.

56
00:04:21,329 --> 00:04:24,060
This operator is called the bhang operator.

57
00:04:24,300 --> 00:04:27,480
It's a quick hack for telling the compiler to relax.

58
00:04:27,960 --> 00:04:31,230
We are confident this property will have at least one tab.

59
00:04:31,620 --> 00:04:34,410
Time to define these select tab function.

60
00:04:36,980 --> 00:04:41,300
The Select tab function will have one parameter called tab.

61
00:04:41,750 --> 00:04:45,980
This parameter will be annotated with the tab component object.

62
00:04:48,300 --> 00:04:54,750
Before reset the active property to true, we should set the active properties in the other tabs to

63
00:04:54,750 --> 00:04:59,730
false, otherwise we may accidentally have multiple active taps.

64
00:05:00,000 --> 00:05:02,940
We will loop through the tabs to achieve this effect.

65
00:05:03,300 --> 00:05:05,010
We will add the following code.

66
00:05:05,370 --> 00:05:07,980
This Dot tabs question mark.

67
00:05:08,070 --> 00:05:09,480
Dot for each.

68
00:05:12,030 --> 00:05:16,200
Inside the for each function, we will pass in an arrow function.

69
00:05:16,500 --> 00:05:20,650
Each tab will be referenced as tab on each iteration.

70
00:05:20,670 --> 00:05:24,090
We will simply tab dot active property to false.

71
00:05:26,500 --> 00:05:33,400
This line should turn every tab off after setting every tab off, we can set the active property.

72
00:05:33,700 --> 00:05:37,120
We will set the Tab Typekit active property to True.

73
00:05:39,700 --> 00:05:41,560
We will make one more change.

74
00:05:41,710 --> 00:05:44,920
Users should be able to change the Active tab.

75
00:05:45,280 --> 00:05:51,850
Luckily, we've outsourced the logic for changing the Active tab to a function, so we'll be able to

76
00:05:51,850 --> 00:05:53,500
reuse it on mouse clicks.

77
00:05:53,800 --> 00:05:56,650
Open the tabs container template file.

78
00:05:59,170 --> 00:06:02,890
On the anchor element, we will listen for a click event.

79
00:06:05,310 --> 00:06:11,880
If the click event is emitted, we will run the Select tab function with the tab component passed in.

80
00:06:14,600 --> 00:06:15,440
We're finished.

81
00:06:15,650 --> 00:06:17,990
Let's check out the model in the browser.

82
00:06:20,230 --> 00:06:26,800
At the moment, both tabs will appear the same, we all use the developer tools to help us verify if

83
00:06:26,800 --> 00:06:31,540
there's an active tab under the Components tab in the angular panel.

84
00:06:31,690 --> 00:06:34,540
We should be able to find our tab components.

85
00:06:34,840 --> 00:06:38,770
There should be two if we look inside the first tab component.

86
00:06:38,980 --> 00:06:41,560
The active property is set to true.

87
00:06:42,650 --> 00:06:49,190
I'm going to click on the second tab in the middle as I do, so the active property is set to false.

88
00:06:49,460 --> 00:06:56,180
If we move over to the second tab component in the developer tools, the active property has been set

89
00:06:56,180 --> 00:07:01,460
to true perfect or able to set the Active tab in the next lecture.

90
00:07:01,550 --> 00:07:06,890
We will begin changing the appearances of the tabs based on the active property.