Retrieve Images from Firebase Storage Using Angular 7

Question

I can not display the images stored in my firebase storage in my angular 7 app. How do I do this without using a service and a simple retrieval of the images from the root of the storage in component then loop in html.

I've already tried different methods to get the download URL but they aren't working. The other methods require using a service which I would not like to do in this case.

Component

import { Component, OnInit } from '@angular/core';
import { AngularFireStorage, AngularFireStorageReference } from '@angular/fire/storage';
import { Observable } from 'rxjs'

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

export class ImageviewerComponent implements OnInit {
  images: Observable<any[]>;

  constructor(private storage: AngularFireStorage) {
    storage.ref("/").getDownloadURL().subscribe(downloadURL => {
      this.images = downloadURL;

    });
   }
}

HTML

        <div class="gal-list-view">
          <div style="margin: 20px">
              <div class="responsive" style="margin: 20px">
                  <div class="gallery" *ngFor="let image of images | async">
                    <a target="_blank">
                      <img src="{{image.url}}" alt="" width="600" height="400">
                    </a>
                    <div class="desc">Img Title</div>
                  </div>
              </div>         
          </div>
        </div>

I would like to just see the images display but it isn't showing anything on the page. If I am on Page 1 and click a link to go to the page showing the image gallery, it only shows an empty page and the link is still Page 1. But when I take out 'storage.ref("/").getDownloadURL().subscribe(downloadURL => { this.images = downloadURL;` Page 1 goes to Image-gallery.

Answer 1

Using a service is recommended to implement any complex logic. It makes an angular app more modular and it also provides reusable methods.

You can use the following code to upload images to Firebase Storage and get the downloadUrl of each upload at the same time.

export class UploadService {
  private basePath = '/images';
  file: File;
  url = '';

  constructor(private afStorage: AngularFireStorage) { }

  handleFiles(event) {
    this.file = event.target.files[0];
  }

  //method to upload file at firebase storage
  async uploadFile() {
    if (this.file) {
      const filePath = `${this.basePath}/${this.file.name}`;    //path at which image will be stored in the firebase storage
      const snap = await this.afStorage.upload(filePath, this.file);    //upload task
      this.getUrl(snap);
    } else {alert('Please select an image'); }
  }

  //method to retrieve download url
  private async getUrl(snap: firebase.storage.UploadTaskSnapshot) {
    const url = await snap.ref.getDownloadURL();
    this.url = url;  //store the URL
    console.log(this.url);
  }
}

Now, this url reference can be used anywhere to display the image.

I would recommend using a service to implement this for the reasons stated above. Feel free to comment if anything is not clear.