In this lecture, we're going to show the progress of the users upload.
We want to be able to let the user know if their upload is in progress, a success or a failure.
Accounting for these three scenarios will provide for a better user experience.
For starters, we will add the upload progress to the alert component inside our upload component.
We are initiating the upload with the upload function from the storage service.
This function returns an object with observables.
As you can imagine, these observables will push data related to the upload, including the progress
of the upload.
We should store the object in a variable called task.
Next, we can immediately subscribe to an observable called percentages changes, the observable can
be accessed by calling this function.
After calling it, we can subscribe to it.
During this subscription, we're going to store the progress in a property first, we need to create
it at the top of the class to find a property called percentage with an initial value of zero.
Back in the subscription, lets pass in an arrow function, the value pushed by the observable will
be referred to as progress.
We can hover our mouse over this argument to learn more about the value the value can either be a number
or undefined.
That's good to know.
We will encounter an issue related to the type inside this function.
We will update the percentage property to the progress property.
As expected, TypeScript will throw an error.
It does not allow for an undefined value to be assigned to this property.
We can assert the type by adding the as keyword.
The argument should be asserted as a no.
After storing this value, we can update the alert component in the template to render this value switch
over to the template and search for the alert component below the message.
We will add another paragraph tag inside this tag add an expression to output the percentage property.
After the expression, we should add the percent symbol.
We could manually add this symbol.
Alternatively, we can use a pipe angular exports, a pipe for formatting percent values.
Let's apply the percent pipe to the expression.
Before the value gets outputted, angular will upend the percent symbol to the pipe.
Let's refresh the page in the browser.
I'm going to attempt to upload a file.
As the file is uploaded, we can see the percentage as clear as day.
However, it's not formatted correctly.
By default, the percent pipe will multiply the value by 100.
Therefore, we will get an abnormally large percent value.
We can fix this value by dividing the percentage by 100 to reverse the changes.
Let's go back to the upload component class file in our editors.
Divide the progress argument by 100 in the assignments.
Let's try testing the upload again.
Voila, we've successfully rendered the upload progress to the user in the next lecture, we're going
to move on to handling errors and successful uploads.