In this lecture, we are going to toggle the form after the user has uploaded a file looking at the
upload page in the browser.
We have a form below the drop box.
The form has two fields.
Users have the option to select a screenshot from their video.
The second field will allow them to input a title from the beginning.
We shouldn't display either field to the user.
The form should be hidden until the user has uploaded a file.
We can toggle the form with a structural directive as an exercise.
Try implementing the solution on your own.
The first step is to keep track of the forms visibility with a property based on this property's value.
Deforms visibility can be toggled carefully.
Consider which directive you would have to use to accomplish this task.
Pause the video and good luck.
Welcome back.
If you're able to toggle the foremost visibility, congrats.
If not, that's fine as well.
Let's go over the solution together.
We'll start by working inside the upload component class file.
Inside this class, let's define our property called next step with an initial value of false.
If your property name is different from mine, that's perfectly fine.
The ultimate goal is to hide the form until a file has been uploaded, as long as you were able to do
that.
You're good to go.
By default, the form should be hidden.
Therefore, this property should be false.
Inside the store file method, we will update this property to true.
The property should be updated after the conditional statement.
At this point in the function, we can safely assume an MP for or file has been uploaded.
Remember, we are limiting uploads to MP for files.
Other files can be supported.
But for the sake of simplicity, we will add exclusive support for MP for files, our component classes
ready.
The next step is to update the template in the upload template search for the Dropbox.
On the surrounding div tag and the NGF, if directive, the directive should check if the next step
property is false.
The last step is to handle the health condition.
We can add an L's condition by adding a semicolon character, followed by the else keyword.
The value for the LS condition should be the name of a template variable in our components template.
We will refer to the form as upload form container.
This template variable doesn't exist.
Let's define it.
We can find the container for our form below the drop box.
It's below a comment that says video editor the form is surrounded by a div tag.
It's not necessary to keep this div tag around.
We can replace it with the nji template element.
On this element, we can add a template variable with the hash character, the name of the template
variable will be called upload form container.
To recap, we're checking if the next step property is set to false on the Dropbox element.
If this condition is true, we will render the Dropbox.
Otherwise, we will render the form.
Hopefully, this solution should toggle the forms visibility.
Let's give our app a test in the browser.
Initially, the form should be gone.
I'm going to drag an image onto the drop box.
The image should not cost the form to appear, it should have been rejected by the uploader.
Next, let's try uploading an MP for file.
After dropping a video, the form has appeared in turn the drop box has disappeared.
Perfect once again, if your variable names are different from mine, that's perfectly acceptable.
At the end of the day, the forms visibility should have been toggled in the next lecture.
We are going to begin making the form functional with reactive forms.