1 00:00:00,180 --> 00:00:06,600 In this lecture, we're going to explore communication between components with a feature called outputs. 2 00:00:06,900 --> 00:00:13,800 At the moment, the communication between parent and child components is one way parent components can 3 00:00:13,800 --> 00:00:16,650 send data to child components with inputs. 4 00:00:17,010 --> 00:00:23,190 What if we want to send data from a child component to a parent component if we want to communicate 5 00:00:23,190 --> 00:00:24,540 with parent components? 6 00:00:24,690 --> 00:00:26,550 We can emit custom events. 7 00:00:27,090 --> 00:00:33,790 Communicating from a child component to a parent component is similar to parent to child communication. 8 00:00:34,260 --> 00:00:39,120 We can send data to a child component by using the input decorator. 9 00:00:39,420 --> 00:00:45,900 Similarly, we can send data back up to a parent component by adding the output decorator. 10 00:00:46,260 --> 00:00:51,660 There are a couple of steps we need to take, but overall the process is still the same. 11 00:00:51,900 --> 00:00:53,100 Let's try it out. 12 00:00:54,560 --> 00:01:00,710 For this demonstration, let's inform the parent component, if the image was selected, we will be 13 00:01:00,710 --> 00:01:03,680 working inside the post component class. 14 00:01:06,300 --> 00:01:11,050 The first step to communicating with a parent component is to limit an event. 15 00:01:11,460 --> 00:01:13,830 It's easy to work with browser events. 16 00:01:14,130 --> 00:01:16,860 The browser will emit them on our behalf. 17 00:01:17,190 --> 00:01:19,320 All we have to do is listen for them. 18 00:01:19,710 --> 00:01:21,840 Custom events are another story. 19 00:01:22,020 --> 00:01:26,250 We need to create a system for emitting and managing events. 20 00:01:26,700 --> 00:01:28,560 Luckily, we don't have to. 21 00:01:28,890 --> 00:01:34,740 Angular has a class for creating and managing custom events at the top of the file. 22 00:01:34,860 --> 00:01:41,790 We're going to update the import statement from the angular slash core package to include the event 23 00:01:41,790 --> 00:01:42,870 emitter class. 24 00:01:45,460 --> 00:01:48,460 This object will help us with creating events. 25 00:01:48,790 --> 00:01:53,220 Let's create a new property in our class called image selected. 26 00:01:55,780 --> 00:02:03,490 Normally, event should be prefixed with the word on, however, Angular advises against that in the 27 00:02:03,490 --> 00:02:07,990 resource section of this lecture, I provide a link to this guideline. 28 00:02:10,560 --> 00:02:17,970 Hangi there recommends we omit the word on it's redundant and inconsistent, as we saw with the key 29 00:02:17,970 --> 00:02:22,770 up event, Angular removes the on key word from the event name. 30 00:02:23,130 --> 00:02:25,740 We should follow their lead for consistency. 31 00:02:26,070 --> 00:02:28,020 Let's go back to our editors. 32 00:02:30,520 --> 00:02:35,800 The value for this property will be a new instance of the event emitter class. 33 00:02:38,310 --> 00:02:45,180 By creating a new instance of this class, we've made a custom event through this instance, we can 34 00:02:45,180 --> 00:02:47,280 emit the event whenever we want. 35 00:02:47,580 --> 00:02:51,690 Before we do, we should add types safely to our events. 36 00:02:52,020 --> 00:02:57,090 We have complete control over the data emitted by our events at the moment. 37 00:02:57,270 --> 00:03:03,090 The data can be anything we can send numbers, strings, objects, et cetera. 38 00:03:03,570 --> 00:03:09,510 If we hover our mouse over the object, it'll tell us the type of data emitted from this event. 39 00:03:09,930 --> 00:03:17,340 The data type is set to any the any type is something we should avoid unless we truly want to emit any 40 00:03:17,340 --> 00:03:18,390 type of value. 41 00:03:18,750 --> 00:03:24,540 For this example, we're going to send the parent component the URL of the clicked image. 42 00:03:24,960 --> 00:03:26,520 The URL is a string. 43 00:03:26,820 --> 00:03:30,420 We should add type safety to the values we emit. 44 00:03:30,990 --> 00:03:34,140 We can add type safety by using generics. 45 00:03:34,410 --> 00:03:37,500 After the name of the class, we all add a generic. 46 00:03:37,770 --> 00:03:39,840 The type will be set to string. 47 00:03:42,480 --> 00:03:49,860 Let's hover our mouse over the event emitter object again, this time the type has been set to string. 48 00:03:50,220 --> 00:03:54,510 We've successfully added type safety to our custom event. 49 00:03:55,230 --> 00:04:01,650 Events are the primary way of communicating from a child component to a parent component, which makes 50 00:04:01,650 --> 00:04:02,190 sense. 51 00:04:02,490 --> 00:04:06,240 That's how simple elements communicate data with us. 52 00:04:06,660 --> 00:04:10,230 Angular simulates this behavior for our components. 53 00:04:10,650 --> 00:04:13,200 There's one problem with our custom event. 54 00:04:13,860 --> 00:04:18,300 The event we've created is only accessible to the component itself. 55 00:04:18,630 --> 00:04:21,390 Parent components cannot listen to this event. 56 00:04:21,720 --> 00:04:26,820 It's the same reason as before angular likes to isolate our components. 57 00:04:27,180 --> 00:04:33,180 We don't want external code to interact with the properties from within the class unless we give permission. 58 00:04:33,510 --> 00:04:38,610 In our case, we do want to allow the parent component to listen for this event. 59 00:04:39,120 --> 00:04:45,480 We can instruct Angular to give permission to parent components by adding the output decorator on the 60 00:04:45,480 --> 00:04:47,580 angular core package. 61 00:04:47,730 --> 00:04:52,530 We're going to update the list of imports by adding the output decorator function. 62 00:04:55,050 --> 00:05:00,120 Next, we will add the output decorator to the image selected property. 63 00:05:02,620 --> 00:05:09,010 There are two more steps we need to take before we're finished, the next step is to limit our event 64 00:05:09,340 --> 00:05:10,150 at the moment. 65 00:05:10,210 --> 00:05:14,170 We've created it, but it will not automatically get emitted. 66 00:05:14,470 --> 00:05:17,290 Let's try to handle this part of the process. 67 00:05:17,560 --> 00:05:19,900 Open the post component template. 68 00:05:22,490 --> 00:05:26,320 On the image tag, we're going to listen for the click event. 69 00:05:28,830 --> 00:05:35,820 Remember to wrap the event with parentheses, otherwise angular will interpret this event as a regular 70 00:05:36,150 --> 00:05:37,380 HTML attribute. 71 00:05:37,740 --> 00:05:44,490 Next, inside the value, we're going to call the init function on the image selected object. 72 00:05:47,070 --> 00:05:54,360 The event emitter object has a method for emitting an event called Emits by calling it, we're triggering 73 00:05:54,360 --> 00:06:00,720 the event, we can send data to event listeners by passing in the data to the emit method. 74 00:06:01,020 --> 00:06:03,480 Let's send the post image property. 75 00:06:06,060 --> 00:06:12,540 The post component is ready, the last step is to listen for the event in the parent component. 76 00:06:12,870 --> 00:06:15,720 Let's switch over to the app template file. 77 00:06:18,370 --> 00:06:22,750 On the app post component, we're going to add a pair of parentheses. 78 00:06:23,080 --> 00:06:26,680 Our editor will automatically recommend our custom event. 79 00:06:27,070 --> 00:06:30,010 That's one of the perks of using the angular extension. 80 00:06:30,280 --> 00:06:33,940 It was able to intelligently detect our custom events. 81 00:06:34,240 --> 00:06:36,190 Let's select it from the list. 82 00:06:36,790 --> 00:06:40,510 Next, we will run a method called log image. 83 00:06:43,010 --> 00:06:47,180 The long image method will log the image sent by the component. 84 00:06:47,510 --> 00:06:50,000 This method doesn't exist in our class. 85 00:06:50,210 --> 00:06:52,610 We should define it before we do. 86 00:06:52,760 --> 00:06:59,570 We should provide this image with the data emitted by our event, data emitted by it and event is stored 87 00:06:59,570 --> 00:07:01,010 in the event variable. 88 00:07:03,600 --> 00:07:08,640 The event variable is not the typical event object we are used to working with. 89 00:07:09,000 --> 00:07:11,250 We will see what it looks like in a moment. 90 00:07:11,520 --> 00:07:13,770 Let's move on to defining this method. 91 00:07:14,100 --> 00:07:16,260 Open the app component class. 92 00:07:18,800 --> 00:07:23,870 We will define the long image method with the event object as an argument. 93 00:07:26,390 --> 00:07:29,360 The type for the event object will be a string. 94 00:07:32,020 --> 00:07:34,900 The value emitted from our event is a string. 95 00:07:35,350 --> 00:07:41,920 Therefore, we don't need to set this argument to an event object like we did last time with our change 96 00:07:41,920 --> 00:07:42,820 text method. 97 00:07:43,180 --> 00:07:46,300 Lastly, we will log the event object. 98 00:07:48,920 --> 00:07:49,490 All right. 99 00:07:49,640 --> 00:07:51,740 Let's refresh the page in the app. 100 00:07:54,270 --> 00:07:58,030 The app is still working if we open the developer tools. 101 00:07:58,050 --> 00:08:00,390 There shouldn't be errors in the console. 102 00:08:00,720 --> 00:08:03,960 Let's try clicking on the image as we do. 103 00:08:04,200 --> 00:08:06,720 The URL of the image is being logged. 104 00:08:06,990 --> 00:08:08,400 It's not very exciting. 105 00:08:08,700 --> 00:08:14,340 All we're doing is sending the data back and forth between the parent and child components. 106 00:08:14,640 --> 00:08:19,620 However, it does show how we can communicate data between components. 107 00:08:20,160 --> 00:08:24,270 So you may have noticed the value of the event argument. 108 00:08:24,600 --> 00:08:31,170 Unlike last time the event argument, it's not an object with dozens of properties about the event. 109 00:08:31,590 --> 00:08:38,280 It doesn't include information like the name of the element we clicked on whenever we're creating custom 110 00:08:38,280 --> 00:08:38,850 events. 111 00:08:39,000 --> 00:08:42,419 We have complete control over the event arguments. 112 00:08:42,630 --> 00:08:44,910 We can choose to send simple data. 113 00:08:45,210 --> 00:08:47,520 It depends on the needs of your event. 114 00:08:47,940 --> 00:08:50,910 Keep that in mind when working with custom events. 115 00:08:51,300 --> 00:08:53,100 That wraps up this lecture. 116 00:08:53,310 --> 00:08:56,580 We've learned how to communicate between components. 117 00:08:56,850 --> 00:09:00,600 It's one of the most common ways to work with data in components. 118 00:09:00,900 --> 00:09:06,900 In the next lecture, we're going to look at an alternative option for passing down content from the 119 00:09:06,900 --> 00:09:09,750 parent component to the child component.