In this lecture, we're going to add an alert component to display the status of the upload.
Along with displaying the alert component, the form should be disabled to prevent duplicate uploads.
Let's quickly add this component to our upload component.
If you would like, you can add the alert component as an exercise.
We've already defined an alert component in the shared module.
We can reuse this component to add an alert element above to form.
The alert component shouldn't render until the user has submitted the form.
Feel free to begin encoding this solution on your own.
Pause the video and good luck.
Welcome back, hopefully you were able to add the alert component without a problem.
If not, that's fine.
Let's quickly walk through the solution together openly upload component class file in your editor.
We're going to define a couple of properties.
The first property will be called show alert with an initial value of false.
This property will be responsible for toggling the visibility of the alert component next defining property
called alert color with an initial value of blue.
Afterward, defining property called Alert Message with the following value please wait.
Your clip is being uploaded.
Lastly, we will create a property called in submission with an initial value of false.
This property will be responsible for disabling the form our properties already.
We should update them when the upload is initiated.
Scroll down to the upload file function at the top of the function.
We should update the alert components properties.
We'll start by setting the show alert property to True.
This update should cause the alert component to appear on the page.
Next, we'll set the alert color property to Blue.
The alert message property should be reset to its initial value.
We're resetting the values in case the user resubmit the form for one reason or another, the upload
may fail.
We should give the user the opportunity to upload the file again.
The last property will update is the in submission property.
Update it to true.
We can move on to updating the template to start using these properties.
Switch over to the upload template file above the form element.
Add the app alert component.
We can toggle the visibility with the NGF directive.
The condition will be the show alert property.
As for the colour of the alert component, we can bind the colour properly to the alert colour property
from our component.
Inside the component, we will add a pair of paragraph tags with the alert message property.
One final step, we need to disable the button on submission.
The button can be found at the bottom of the form element on this element binds the disabled attribute
to the end submission property.
We could leave it at this.
However, I think we should change the appearance of the button based on the submission status.
We should add transparency and disable the hover effect when the form is in submission on the button
element.
The energy class directive to an object.
We can add transparency to an element by adding the Opacity 50 class.
There are different levels of opacity.
You can check out the tailwinds documentation for a different opacity level.
I think 50 will work for our case.
We should add this class if the information property is true.
Next, we will add the hover bag Indigo seven Hunter class to the object, this property should be applied
if the inner submission property is false.
The class we've added to the object should be removed from the class attribute, otherwise the effect
may remain on the button even during submission.
We're finished.
Time to give our app a test in the browser.
Let's upload a file to our app.
Clicking on the publish button will disable the button above the form, our alert component should appear
with the color blue.
Awesome.
We're notifying the user of the upload in the next couple of lectures.
We are going to improve this solution by showing the progress of the upload.