1 00:00:00,120 --> 00:00:06,930 In this lecture, we are going to update the list of clips after the user submits the form at the moment. 2 00:00:07,140 --> 00:00:10,530 Form submissions do not cause the title to be updated. 3 00:00:10,890 --> 00:00:14,460 Users may get confused by the lack of updates on this page. 4 00:00:14,730 --> 00:00:20,340 It may lead to duplicate submissions, which can lead to a higher bill by Firebase. 5 00:00:20,850 --> 00:00:23,460 Accomplishing this will require outputs. 6 00:00:23,670 --> 00:00:26,700 We need to create an event from the edit component. 7 00:00:27,060 --> 00:00:33,960 After creating the event will update the manage component to listen for the event from the child component. 8 00:00:34,290 --> 00:00:39,420 The Manage component will use the data emitted by the event to update its data. 9 00:00:39,780 --> 00:00:40,980 Let's give it a try. 10 00:00:41,220 --> 00:00:44,490 Open the Edit Component Class file in your editor. 11 00:00:47,060 --> 00:00:49,640 We're going to need to import two functions. 12 00:00:49,850 --> 00:00:56,330 First, we need to input the output decorator to allow the parent component to listen to an event on 13 00:00:56,330 --> 00:01:03,380 the component in the import list for the angular core package and the output decorator. 14 00:01:05,770 --> 00:01:12,490 Next, we need the event, a middle class to generate a custom event, it can be imported from the same 15 00:01:12,490 --> 00:01:13,120 package. 16 00:01:15,560 --> 00:01:23,450 With these two classes, we can begin emitting data in our class, define a property called update decorated 17 00:01:23,450 --> 00:01:25,160 with the output decorator. 18 00:01:27,700 --> 00:01:32,710 The value for this property will be a new instance of the event emitter class. 19 00:01:35,260 --> 00:01:40,030 After creating the event emitter object, we need to emit an event. 20 00:01:40,480 --> 00:01:45,490 Otherwise, the parent component will listen to an event that never emits values. 21 00:01:45,790 --> 00:01:47,980 We should emit a value in the form. 22 00:01:47,980 --> 00:01:49,600 Submission is a success. 23 00:01:49,990 --> 00:01:52,090 Scroll down to the submit function. 24 00:01:52,390 --> 00:01:57,700 After the try catch block, we will emit an event by calling the emit function. 25 00:02:00,300 --> 00:02:06,450 We have the option of sending a value to the parent component in this case, we're going to send the 26 00:02:06,450 --> 00:02:09,750 active clip property back to the parent component. 27 00:02:12,290 --> 00:02:19,190 The active clip property contains the ID and title of the clip, the parent component is going to need 28 00:02:19,190 --> 00:02:24,080 to know this information when updating the data before we send this object. 29 00:02:24,200 --> 00:02:25,760 We should update the title. 30 00:02:26,120 --> 00:02:29,570 The title in the control gets updated, but not the title. 31 00:02:29,570 --> 00:02:37,280 In the active clip object set, the active clip talked title property to the title value property. 32 00:02:40,180 --> 00:02:46,180 Inside this function, we're going to create a conditional statement for checking if the active clip 33 00:02:46,180 --> 00:02:47,530 property is empty. 34 00:02:47,860 --> 00:02:50,290 If it is, we'll return the function. 35 00:02:52,950 --> 00:02:56,400 It's possible the active clip property may be empty. 36 00:02:56,730 --> 00:03:02,730 Let's move on to accepting this data from the manage component open the Manage template file. 37 00:03:05,280 --> 00:03:10,800 At the bottom of this template, we loaded the app edit component on this component. 38 00:03:10,950 --> 00:03:17,880 We're going to bind the update event to a function called update with the event object passed onto the 39 00:03:17,880 --> 00:03:18,420 function. 40 00:03:21,100 --> 00:03:26,380 The last step is to define this function openly managed component class file. 41 00:03:28,900 --> 00:03:34,930 Defined this method inside the class with the event object accepted as the first argument. 42 00:03:37,480 --> 00:03:44,200 As we learned before, the event, object will not contain the typical event data, the data stored 43 00:03:44,200 --> 00:03:48,040 in this argument will be the data emitted by the child components. 44 00:03:48,370 --> 00:03:52,660 Therefore, we should annotate this property with the AI clip model. 45 00:03:55,130 --> 00:04:01,520 Next, we need to start updating the title the parent component doesn't know which title to update. 46 00:04:01,850 --> 00:04:06,410 There are different ways to inform the parent component of the clip to update. 47 00:04:06,740 --> 00:04:12,740 Theoretically, we could store the index, but I think looping through the array of clips will be easier. 48 00:04:13,070 --> 00:04:14,960 We already have the documented. 49 00:04:15,440 --> 00:04:22,280 We might as well use it inside this function loop through the clips array with the for each function. 50 00:04:24,850 --> 00:04:29,850 We're going to pass in a function to handle each iteration with each iteration. 51 00:04:29,920 --> 00:04:33,250 We're going to accept the elements and index. 52 00:04:35,680 --> 00:04:42,910 Next, inside the function will use a conditional statement to check if the Element Duck ID property 53 00:04:42,910 --> 00:04:46,210 is equal to the event Typekit ID property. 54 00:04:48,710 --> 00:04:55,220 If this condition turns out to be true, we all know which clip to update inside the condition, set 55 00:04:55,220 --> 00:04:57,120 the this dot clips. 56 00:04:57,170 --> 00:05:01,760 I got title property to the event title property. 57 00:05:06,500 --> 00:05:07,280 We're finished. 58 00:05:07,430 --> 00:05:10,280 Let's try testing the form in the browser. 59 00:05:10,430 --> 00:05:11,960 Edit any of the clips. 60 00:05:14,410 --> 00:05:20,530 If we switch back, the changes are reflected in the list, refreshing the page will show that each 61 00:05:20,530 --> 00:05:22,720 update persisted in the database. 62 00:05:23,320 --> 00:05:26,560 You can check the database if you would like further confirmation. 63 00:05:26,860 --> 00:05:28,180 There's just one problem. 64 00:05:28,390 --> 00:05:30,640 Let's quickly edit any of the clips. 65 00:05:33,150 --> 00:05:35,460 Next, I'll switch to another clip. 66 00:05:38,020 --> 00:05:40,720 The alert message displays for the other clips. 67 00:05:40,930 --> 00:05:42,910 It's not desirable behavior. 68 00:05:43,210 --> 00:05:45,370 The end user may get confused. 69 00:05:45,610 --> 00:05:48,970 We should heightened the alert box when the user switches clips. 70 00:05:49,270 --> 00:05:51,100 Let's quickly update the form. 71 00:05:51,370 --> 00:05:54,160 Open the edit component class in your editor. 72 00:05:56,660 --> 00:06:03,170 We're going to toggle the alert component when the energy on changes, life cycle function runs inside 73 00:06:03,170 --> 00:06:03,890 this function. 74 00:06:04,070 --> 00:06:07,850 Set the IND submission and show alert properties to false. 75 00:06:10,290 --> 00:06:12,270 Let's give our app one more test. 76 00:06:14,700 --> 00:06:15,090 Great. 77 00:06:15,300 --> 00:06:16,620 The effect goes away. 78 00:06:16,890 --> 00:06:18,450 I know I flew right by this. 79 00:06:18,660 --> 00:06:23,880 It was a lot of code to hook up the form if you were confused with any part of the process. 80 00:06:24,000 --> 00:06:26,790 I recommend reviewing the last three sections. 81 00:06:27,120 --> 00:06:30,150 A lot of what we did was broken down in those lectures. 82 00:06:30,660 --> 00:06:36,540 The newest thing we learned was how to select an individual document from the collection by using lead 83 00:06:36,540 --> 00:06:37,620 document function. 84 00:06:38,050 --> 00:06:43,560 Firebase will return an object with properties and methods for interacting with the document. 85 00:06:43,920 --> 00:06:48,450 We took advantage of one of the functions for updating the properties in a document. 86 00:06:48,810 --> 00:06:51,750 It isn't important to update every property. 87 00:06:52,170 --> 00:06:56,010 Firebase is flexible in this regard in the next lecture. 88 00:06:56,160 --> 00:06:59,160 We will wrap things up with the Manage page.