How do display files from firebase storage in angular ngfor

The downloadURL function returns an Observable. So you won't be able to do this as such.

But you can create two arrays. One of these observables and the other one for the actual download urls. You can then apply a forkJoin operator on the downloadURLObservables array to get the actual download urls.

This is what it is going to look like in code:

// import forkJoin from here.
import { forkJoin } from 'rxjs/observable/forkJoin';

// declare arrays for storing observables and download url strings;
downloadUrlObservables: Observable<string>[];
downloadUrls: string[];



// map the files to get the download urls in the observable array.
downloadUrlObservables = this.files.map(file => this.storage.ref(file).downloadURL());

// apply a forkJoin to get all the download urls at once.
forkJoin(this.downloadUrlObservables).subscribe(downloadUrls => this.downloadUrls = downloadUrls);

Then you can use the downloadUrls array in your template like this:

<div *ngFor="let downloadUrl in downloadUrls"> <img [src]="downloadUrl | safe: 'url'"> </div>

You might have to sanitize the src url for the image tag if you get a DOM Sanitization error.

To fix that, you can create an Angular Pipe that does just that.

Here's a generic implementation of that pipe courtesy this medium article:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) { }

  public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }
}

Firebase Storage works in a similar way when extracting data. Though there are different ways to retrieve. One of the most important factor is how you save your data. According to which you will be able to retrieve them.

Here:

storageRef.child("users/me/profile.png").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
    @Override
    public void onSuccess(Uri uri) {
        // Got the download URL for 'users/me/profile.png'
    }
}).addOnFailureListener(new OnFailureListener() {
    @Override
    public void onFailure(@NonNull Exception exception) {
        // Handle any errors
    }
});

// Alternatively way to get download URL

storageRef.child("users/me/profile.png").getDownloadUrl().getResult(); 

The location of child is very crucial and that should be a part of your login.

For example in a news structure, it can be:

storageRef.child("newsID/articleimage/image.jpg")

newsID - Unique id for each article. IMPORTANT! when you create your article in order to get separate images. and that, "image.jpg" can be downloaded various ways as explained here: Documentation.