title: display an image that was selected in another component using Angular with fireBase
body: <p>i'm trying to display a photo that i have chose in another component
  here is my code
  in traitement.ts</p>
  <pre><code>onselectedFile(event: any) {
          if (event.target.files &amp;&amp; event.target.files[0]) {
              const reader = new FileReader();
              reader.onload = (e: any) =&gt; this.imgSrc = e.target.result;
              reader.readAsDataURL(event.target.files[0]);
              this._selectedImage = event.target.files[0];
          } else {
              this.imgSrc = &quot;assets/images/placeholder.jpg&quot;;
              this._selectedImage = null;
          }
      }
  
  public save() {
  
  
          this.submitted = true;
          this.validateForm();
          if (this.errorMessages.length === 0) {
              var filePath = `images/traitement/imgOrdonance${this._selectedImage.name.split('.').slice(0, -1).join('.')}_${new Date().getTime()}`;
              const fileRef = this.storage.ref(filePath);
              this.storage.upload(filePath, this._selectedImage).snapshotChanges().pipe(
                  finalize(() =&gt; {
                      fileRef.getDownloadURL().subscribe((url) =&gt; {
                          this._selectedImage = url;
                          this.traitementService.insertImageDetails(this._selectedImage);
                      })
                  })
              ).subscribe();
              this.saveWithShowOption(false);
          } else {
              this.messageService.add({
                  severity: 'error',
                  summary: 'Erreurs',
                  detail: 'Merci de corrigé les erreurs sur le formulaire'
              });
          }
      }
  
  
  </code></pre>
  <p>and in my traitement.html</p>
  <pre><code>
  &lt;div class=&quot;p-field p-col-12 p-md-6 content&quot;&gt;
                          &lt;div class=&quot;contentImage&quot;&gt;
                              &lt;p class=&quot;p-mb-2 p-mr-2&quot; for=&quot;3&quot;&gt;Image ordonnance&lt;/p&gt;
                              &lt;img class=&quot;p-mb-2 p-mr-2&quot; [src]=&quot;imgSrc&quot; width=&quot;200px&quot; height=&quot;100px&quot;
                                    (click)=&quot;fileUploader.click()&quot;&gt;
  
                              &lt;input  class=&quot;p-mb-2 p-mr-2&quot; type=&quot;file&quot; accept=&quot;image/*&quot; #fileUploader
                                     id=&quot;file-upload&quot; type=&quot;file&quot;  placeholder=&quot;Image ordonnance&quot; (change)=&quot;onselectedFile($event)&quot;
                                     /&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
  </code></pre>
  <p>and this is my service traitement.service.ts</p>
  <pre><code> imageDetailList: AngularFireList&lt;any&gt;;
      getImageDetailList() {
          this.imageDetailList = this.firebase.list('imageDetails');
      }
  
      insertImageDetails(imageDetails) {
          this.imageDetailList.push(imageDetails);
      }
  
  </code></pre>
  <p>i'm using firebase to store my images and in another component I want to list those file that I selected anyone please have an idea ?</p>