1 00:00:00,120 --> 00:00:05,670 In this lecture, we're going to add an alert component to display the status of the upload. 2 00:00:06,030 --> 00:00:12,450 Along with displaying the alert component, the form should be disabled to prevent duplicate uploads. 3 00:00:12,780 --> 00:00:16,230 Let's quickly add this component to our upload component. 4 00:00:16,680 --> 00:00:20,790 If you would like, you can add the alert component as an exercise. 5 00:00:21,060 --> 00:00:24,720 We've already defined an alert component in the shared module. 6 00:00:24,960 --> 00:00:29,250 We can reuse this component to add an alert element above to form. 7 00:00:29,670 --> 00:00:34,230 The alert component shouldn't render until the user has submitted the form. 8 00:00:34,650 --> 00:00:37,890 Feel free to begin encoding this solution on your own. 9 00:00:38,220 --> 00:00:40,140 Pause the video and good luck. 10 00:00:41,980 --> 00:00:47,110 Welcome back, hopefully you were able to add the alert component without a problem. 11 00:00:47,410 --> 00:00:48,910 If not, that's fine. 12 00:00:49,150 --> 00:00:55,600 Let's quickly walk through the solution together openly upload component class file in your editor. 13 00:00:55,840 --> 00:00:58,270 We're going to define a couple of properties. 14 00:00:58,600 --> 00:01:04,180 The first property will be called show alert with an initial value of false. 15 00:01:06,770 --> 00:01:14,390 This property will be responsible for toggling the visibility of the alert component next defining property 16 00:01:14,390 --> 00:01:17,720 called alert color with an initial value of blue. 17 00:01:20,380 --> 00:01:26,260 Afterward, defining property called Alert Message with the following value please wait. 18 00:01:26,410 --> 00:01:28,060 Your clip is being uploaded. 19 00:01:30,650 --> 00:01:36,830 Lastly, we will create a property called in submission with an initial value of false. 20 00:01:39,400 --> 00:01:44,800 This property will be responsible for disabling the form our properties already. 21 00:01:45,040 --> 00:01:47,920 We should update them when the upload is initiated. 22 00:01:48,130 --> 00:01:52,660 Scroll down to the upload file function at the top of the function. 23 00:01:52,810 --> 00:01:55,900 We should update the alert components properties. 24 00:01:56,230 --> 00:01:59,800 We'll start by setting the show alert property to True. 25 00:02:02,360 --> 00:02:06,350 This update should cause the alert component to appear on the page. 26 00:02:06,650 --> 00:02:10,280 Next, we'll set the alert color property to Blue. 27 00:02:12,890 --> 00:02:17,090 The alert message property should be reset to its initial value. 28 00:02:19,490 --> 00:02:26,030 We're resetting the values in case the user resubmit the form for one reason or another, the upload 29 00:02:26,030 --> 00:02:26,780 may fail. 30 00:02:27,080 --> 00:02:30,980 We should give the user the opportunity to upload the file again. 31 00:02:31,310 --> 00:02:35,660 The last property will update is the in submission property. 32 00:02:36,080 --> 00:02:37,550 Update it to true. 33 00:02:40,060 --> 00:02:44,440 We can move on to updating the template to start using these properties. 34 00:02:44,680 --> 00:02:49,360 Switch over to the upload template file above the form element. 35 00:02:49,420 --> 00:02:51,520 Add the app alert component. 36 00:02:54,080 --> 00:02:57,770 We can toggle the visibility with the NGF directive. 37 00:02:58,040 --> 00:03:00,800 The condition will be the show alert property. 38 00:03:03,360 --> 00:03:09,840 As for the colour of the alert component, we can bind the colour properly to the alert colour property 39 00:03:09,840 --> 00:03:11,010 from our component. 40 00:03:13,480 --> 00:03:19,510 Inside the component, we will add a pair of paragraph tags with the alert message property. 41 00:03:23,500 --> 00:03:27,400 One final step, we need to disable the button on submission. 42 00:03:27,730 --> 00:03:34,870 The button can be found at the bottom of the form element on this element binds the disabled attribute 43 00:03:34,900 --> 00:03:36,910 to the end submission property. 44 00:03:39,450 --> 00:03:40,890 We could leave it at this. 45 00:03:41,280 --> 00:03:46,200 However, I think we should change the appearance of the button based on the submission status. 46 00:03:46,470 --> 00:03:52,620 We should add transparency and disable the hover effect when the form is in submission on the button 47 00:03:52,620 --> 00:03:53,160 element. 48 00:03:53,700 --> 00:03:56,310 The energy class directive to an object. 49 00:03:58,830 --> 00:04:03,510 We can add transparency to an element by adding the Opacity 50 class. 50 00:04:06,040 --> 00:04:08,080 There are different levels of opacity. 51 00:04:08,320 --> 00:04:12,730 You can check out the tailwinds documentation for a different opacity level. 52 00:04:13,060 --> 00:04:15,310 I think 50 will work for our case. 53 00:04:15,640 --> 00:04:19,480 We should add this class if the information property is true. 54 00:04:22,060 --> 00:04:29,320 Next, we will add the hover bag Indigo seven Hunter class to the object, this property should be applied 55 00:04:29,320 --> 00:04:31,930 if the inner submission property is false. 56 00:04:34,520 --> 00:04:40,850 The class we've added to the object should be removed from the class attribute, otherwise the effect 57 00:04:40,850 --> 00:04:43,580 may remain on the button even during submission. 58 00:04:48,260 --> 00:04:49,070 We're finished. 59 00:04:49,190 --> 00:04:52,010 Time to give our app a test in the browser. 60 00:04:52,040 --> 00:04:54,320 Let's upload a file to our app. 61 00:04:56,870 --> 00:05:03,230 Clicking on the publish button will disable the button above the form, our alert component should appear 62 00:05:03,230 --> 00:05:04,310 with the color blue. 63 00:05:04,760 --> 00:05:05,330 Awesome. 64 00:05:05,540 --> 00:05:09,880 We're notifying the user of the upload in the next couple of lectures. 65 00:05:09,890 --> 00:05:14,720 We are going to improve this solution by showing the progress of the upload.