1 00:00:00,120 --> 00:00:06,480 In this lecture, we are going to talk about the content children decorator for helping us select elements 2 00:00:06,480 --> 00:00:07,770 inside our template. 3 00:00:08,100 --> 00:00:12,630 The goal of this lecture is to find out how many tabs are in our component. 4 00:00:12,960 --> 00:00:17,280 As we've discussed before, our times component should be flexible. 5 00:00:17,640 --> 00:00:21,000 It should be able to render two tabs or 20 tabs. 6 00:00:21,270 --> 00:00:23,820 Open the tabs container template file. 7 00:00:26,310 --> 00:00:30,330 The container needs to know how many tabs are inside this component. 8 00:00:30,630 --> 00:00:34,980 If we look at the top of the template, we have an unordered list element. 9 00:00:35,310 --> 00:00:38,520 This list contains the links to the various tabs. 10 00:00:38,820 --> 00:00:42,130 Therefore, we need to know how many tabs there are. 11 00:00:42,150 --> 00:00:45,600 If you want to render links to them, here's the problem. 12 00:00:45,870 --> 00:00:48,690 The tabs are not directly added to the component. 13 00:00:48,960 --> 00:00:52,200 Instead, they are projected from the parent component. 14 00:00:52,530 --> 00:00:57,900 The projected content will replace the energy contents element in our template. 15 00:00:58,290 --> 00:01:01,080 We need a way to grab the projected content. 16 00:01:01,440 --> 00:01:08,370 This is where the Content Children decorator comes in to play the content children decorator allows 17 00:01:08,370 --> 00:01:11,400 us to select elements from projected content. 18 00:01:11,790 --> 00:01:13,440 It's super simple to use. 19 00:01:13,680 --> 00:01:14,910 Let's give it a try. 20 00:01:15,240 --> 00:01:18,600 Open the Thames container component class file. 21 00:01:21,110 --> 00:01:27,560 We are going to import the content children decorator function from the angular slash core package. 22 00:01:29,990 --> 00:01:33,290 Next, we will create a property called Tab's. 23 00:01:33,590 --> 00:01:36,950 It will be decorated with the content children decorator. 24 00:01:39,490 --> 00:01:46,360 The content children decorator must be called as a function, this function has one required parameter. 25 00:01:46,630 --> 00:01:50,680 It's an element we'd like to select from the projected content. 26 00:01:51,070 --> 00:01:53,380 We're not limited to selecting elements. 27 00:01:53,530 --> 00:01:57,250 We can select components to be absolutely clear. 28 00:01:57,490 --> 00:02:00,400 This decorator targets projected content. 29 00:02:00,820 --> 00:02:06,490 It cannot select elements from the entire template of the component for our scenario. 30 00:02:06,520 --> 00:02:07,420 It's perfect. 31 00:02:07,660 --> 00:02:13,210 We are trying to select the tab components, which are sent down as projected content. 32 00:02:13,600 --> 00:02:16,690 We need to pass in the tab component class. 33 00:02:19,350 --> 00:02:26,700 The editor should have automatically imported the tab component file, if not manually import this component 34 00:02:26,700 --> 00:02:27,270 class. 35 00:02:27,630 --> 00:02:34,410 One last thing we need to give our property in initial value, we will assign this property an empty 36 00:02:34,410 --> 00:02:35,100 object. 37 00:02:37,660 --> 00:02:42,310 Let's verify if we can grab the tab components by logging this property. 38 00:02:43,220 --> 00:02:48,620 Inside the kng on an ID function, we are going to log the tabs property. 39 00:02:51,170 --> 00:02:53,570 Next, let's refresh the page. 40 00:02:56,120 --> 00:03:03,380 Under the developer tools, open the console panel, if we look closely, the log will output an empty 41 00:03:03,380 --> 00:03:04,070 object. 42 00:03:04,340 --> 00:03:08,690 How mysterious we should have received a list of our tab components. 43 00:03:09,020 --> 00:03:11,090 It's not a problem with our decorator. 44 00:03:11,420 --> 00:03:17,510 The reason we're receiving an object is because of the lifecycle function we are using in our component. 45 00:03:19,450 --> 00:03:21,730 Let's review the life cycle functions. 46 00:03:22,030 --> 00:03:27,700 It's been a while since we've talked about them, the energy on init IT function will be called when 47 00:03:27,700 --> 00:03:29,740 the component has been initialized. 48 00:03:30,040 --> 00:03:34,000 We will have access to the properties and methods in our class. 49 00:03:34,390 --> 00:03:36,160 This includes input data. 50 00:03:36,520 --> 00:03:42,490 However, we don't have access to our projected content during this lifecycle function. 51 00:03:42,700 --> 00:03:45,970 The projected content hasn't been initialized yet. 52 00:03:46,510 --> 00:03:50,560 We need to wait for the initialization of the projected content. 53 00:03:50,920 --> 00:03:55,450 Angular offers another hook called N.G. after content in it. 54 00:03:55,870 --> 00:04:00,100 This hook runs after the projected content has been initialized. 55 00:04:00,400 --> 00:04:04,360 It's the perfect time to start working with our tab components. 56 00:04:06,020 --> 00:04:13,670 First, we will implement an interface for this hook in the import statement for the angular core package. 57 00:04:13,910 --> 00:04:19,579 We will replace the on init interface with the after content init interface. 58 00:04:22,130 --> 00:04:24,710 We won't need the on in it interface. 59 00:04:25,040 --> 00:04:27,080 It's perfectly fine to replace it. 60 00:04:27,440 --> 00:04:33,800 Next, we will replace the interface on the class with the after content in interface. 61 00:04:36,280 --> 00:04:43,810 Lastly, in our class, we will replace the energy on init function with the energy after content init 62 00:04:43,810 --> 00:04:44,410 function. 63 00:04:46,940 --> 00:04:49,190 Let's refresh the page in the browser. 64 00:04:51,720 --> 00:04:56,190 This time, the console will output an object called query list. 65 00:04:57,540 --> 00:05:04,080 The query list object contains information on the elements selected from the content children decorate 66 00:05:04,080 --> 00:05:04,710 or function. 67 00:05:05,100 --> 00:05:08,880 If we look inside, we will find a property called results. 68 00:05:09,210 --> 00:05:11,430 It's the only property we care about. 69 00:05:11,700 --> 00:05:14,520 It contains an array of tab components. 70 00:05:14,790 --> 00:05:16,770 There are two tab components. 71 00:05:16,980 --> 00:05:19,950 It matches the number of components in our app. 72 00:05:20,520 --> 00:05:21,150 Perfect. 73 00:05:21,390 --> 00:05:25,560 We've successfully retrieved a list of tabs inside the container. 74 00:05:25,890 --> 00:05:31,020 If we add more tabs, the decorator will always return the correct amount of tabs. 75 00:05:31,290 --> 00:05:36,210 Furthermore, it can scale with any number of tabs in the next lecture. 76 00:05:36,240 --> 00:05:39,030 We will continue working on our tabs.