Firebase & AngularFire In Depth

Author: Your Name

src/app/create-course/create-course.component.html

@@ -18,6 +18,18 @@ <h3>Create New Course</h3>
 
       <input type="file" (change)="uploadThumbnail($event)">
 
+       <div class="upload-progress" *ngIf="(percentageChanges$ | async) as percentage">
+
+           <mat-progress-bar class="progress-bar"
+                             mode="determinate"
+            [value]="percentage">
+
+           </mat-progress-bar>
+
+           <span>{{percentage / 100 | percent}}</span>
+
+       </div>
+
     </div>
 
     <mat-form-field appearance="outline">

src/app/create-course/create-course.component.ts

@@ -19,6 +19,9 @@ export class CreateCourseComponent implements OnInit {
 
   courseId:string;
 
+  percentageChanges$: Observable<number>;
+
+
   form = this.fb.group({
      description:  ['', Validators.required],
       category: ["BEGINNER", Validators.required],
@@ -48,6 +51,9 @@ export class CreateCourseComponent implements OnInit {
           cacheControl: "max-age=2592000,public"
       })
 
+       this.percentageChanges$ = task.percentageChanges();
+
+
         task.snapshotChanges().subscribe();