1
00:00:00,180 --> 00:00:06,540
In this lecture, we are going to toggle the form after the user has uploaded a file looking at the

2
00:00:06,540 --> 00:00:08,460
upload page in the browser.

3
00:00:08,580 --> 00:00:10,890
We have a form below the drop box.

4
00:00:11,160 --> 00:00:12,900
The form has two fields.

5
00:00:13,170 --> 00:00:16,980
Users have the option to select a screenshot from their video.

6
00:00:17,370 --> 00:00:22,230
The second field will allow them to input a title from the beginning.

7
00:00:22,230 --> 00:00:24,930
We shouldn't display either field to the user.

8
00:00:25,230 --> 00:00:28,980
The form should be hidden until the user has uploaded a file.

9
00:00:29,280 --> 00:00:33,840
We can toggle the form with a structural directive as an exercise.

10
00:00:34,050 --> 00:00:36,750
Try implementing the solution on your own.

11
00:00:37,440 --> 00:00:44,070
The first step is to keep track of the forms visibility with a property based on this property's value.

12
00:00:44,140 --> 00:00:47,580
Deforms visibility can be toggled carefully.

13
00:00:47,580 --> 00:00:51,960
Consider which directive you would have to use to accomplish this task.

14
00:00:52,290 --> 00:00:54,300
Pause the video and good luck.

15
00:00:56,050 --> 00:00:56,920
Welcome back.

16
00:00:57,070 --> 00:01:00,790
If you're able to toggle the foremost visibility, congrats.

17
00:01:01,000 --> 00:01:02,950
If not, that's fine as well.

18
00:01:03,250 --> 00:01:05,620
Let's go over the solution together.

19
00:01:05,920 --> 00:01:10,150
We'll start by working inside the upload component class file.

20
00:01:10,480 --> 00:01:16,930
Inside this class, let's define our property called next step with an initial value of false.

21
00:01:19,550 --> 00:01:23,540
If your property name is different from mine, that's perfectly fine.

22
00:01:23,930 --> 00:01:30,170
The ultimate goal is to hide the form until a file has been uploaded, as long as you were able to do

23
00:01:30,170 --> 00:01:30,590
that.

24
00:01:30,680 --> 00:01:31,670
You're good to go.

25
00:01:32,000 --> 00:01:34,250
By default, the form should be hidden.

26
00:01:34,580 --> 00:01:37,430
Therefore, this property should be false.

27
00:01:37,970 --> 00:01:42,530
Inside the store file method, we will update this property to true.

28
00:01:42,920 --> 00:01:46,630
The property should be updated after the conditional statement.

29
00:01:49,320 --> 00:01:54,540
At this point in the function, we can safely assume an MP for or file has been uploaded.

30
00:01:54,840 --> 00:01:58,470
Remember, we are limiting uploads to MP for files.

31
00:01:58,740 --> 00:02:00,450
Other files can be supported.

32
00:02:00,630 --> 00:02:08,039
But for the sake of simplicity, we will add exclusive support for MP for files, our component classes

33
00:02:08,039 --> 00:02:08,460
ready.

34
00:02:08,759 --> 00:02:14,370
The next step is to update the template in the upload template search for the Dropbox.

35
00:02:16,780 --> 00:02:23,620
On the surrounding div tag and the NGF, if directive, the directive should check if the next step

36
00:02:23,620 --> 00:02:25,030
property is false.

37
00:02:27,580 --> 00:02:30,280
The last step is to handle the health condition.

38
00:02:30,580 --> 00:02:36,070
We can add an L's condition by adding a semicolon character, followed by the else keyword.

39
00:02:36,460 --> 00:02:42,310
The value for the LS condition should be the name of a template variable in our components template.

40
00:02:42,670 --> 00:02:46,510
We will refer to the form as upload form container.

41
00:02:49,000 --> 00:02:51,320
This template variable doesn't exist.

42
00:02:51,520 --> 00:02:52,570
Let's define it.

43
00:02:52,810 --> 00:02:56,590
We can find the container for our form below the drop box.

44
00:02:56,890 --> 00:03:02,620
It's below a comment that says video editor the form is surrounded by a div tag.

45
00:03:02,890 --> 00:03:06,190
It's not necessary to keep this div tag around.

46
00:03:06,460 --> 00:03:09,730
We can replace it with the nji template element.

47
00:03:12,350 --> 00:03:18,560
On this element, we can add a template variable with the hash character, the name of the template

48
00:03:18,560 --> 00:03:21,950
variable will be called upload form container.

49
00:03:24,510 --> 00:03:30,660
To recap, we're checking if the next step property is set to false on the Dropbox element.

50
00:03:30,990 --> 00:03:34,830
If this condition is true, we will render the Dropbox.

51
00:03:35,070 --> 00:03:37,350
Otherwise, we will render the form.

52
00:03:37,740 --> 00:03:41,460
Hopefully, this solution should toggle the forms visibility.

53
00:03:41,730 --> 00:03:44,070
Let's give our app a test in the browser.

54
00:03:46,600 --> 00:03:48,880
Initially, the form should be gone.

55
00:03:49,120 --> 00:03:52,000
I'm going to drag an image onto the drop box.

56
00:03:54,570 --> 00:04:00,000
The image should not cost the form to appear, it should have been rejected by the uploader.

57
00:04:00,300 --> 00:04:03,600
Next, let's try uploading an MP for file.

58
00:04:06,070 --> 00:04:11,750
After dropping a video, the form has appeared in turn the drop box has disappeared.

59
00:04:12,130 --> 00:04:18,399
Perfect once again, if your variable names are different from mine, that's perfectly acceptable.

60
00:04:18,670 --> 00:04:24,070
At the end of the day, the forms visibility should have been toggled in the next lecture.

61
00:04:24,190 --> 00:04:28,750
We are going to begin making the form functional with reactive forms.