@Component({
  selector: 'file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})

export class FileUploadComponent {
  task: AngularFireUploadTask;
  percentage: Observable<number>;
  snapshot: Observable<any>;
  downloadURL: Observable<string | null> ;





  constructor(private storage: AngularFireStorage, private db: AngularFirestore) {
    this.downloadURL = 'http://via.placeholder.com/350x150';
   }

  fileUpload(event){

    const file = event.target.files[0];

    const filePath = `test/${new Date().getTime()}_${file.name}`;

    const fileRef = this.storage.ref(filePath);

    const task = this.storage.upload(filePath, file);

    //observe percentage changes
    this.percentage = task.percentageChanges();
    //get notified when the download URL is available
    task.snapshotChanges().pipe(
      finalize(
        () => {
          this.downloadURL = fileRef.getDownloadURL();
        }
      )
    )
    .subscribe();


  }


}

<div class="container">
  <div class="card">
    <div class="card-header">
      Firebase Cloud Storage & Angular 5
    </div>
    <div class="card-body">
      <h5 class="card-title">Select a file for upload:</h5>
      <input type="file" (change)="fileUpload($event)" accept=".png,.jpg" />
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-striped bg-success" role="progressbar" [style.width]="(percentage | async) + '%'" [attr.aria-valuenow]="(percentage | async)" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <img *ngIf="downloadURL != null" [src]="downloadURL | async" />
  </div>
</div>

downloadURL: BehaviorSubject<string>;

construction () {
 this.downloadURL = new BehaviorSubject<string>('http://via.placeholder.com/350x150');
}

task.snapshotChanges().pipe(
  finalize(
    () => {
      const dlImage = fileRef.getDownloadURL();
      this.downloadURL.next(dlImage);
    }
  )
)
.subscribe();

<img src="{{downloadURL | async}}" />