title: How to get the data from Firebase to create a list?
body: <p>My goal is to create a portfolio page where the user can add arworks by filling a form (titel, technique, image, yaer etc.). Submited data will be added to an array and presented in a form of a list.</p>
  
  <p>I'm able to upload the array to the firebase but I don't know how to upload it when the site starts. I want it to update and refresh the list on the page each time I submit an item. I spent hours looking for the right way to do it.</p>
  
  <pre><code>//SERVER.SERVICE
  
  export class ServerService {
    url:string = 'https://basic-31cd5.firebaseio.com';
  
  constructor(
    private httpClient: HttpClient,
    private artService:ArtService
    ) { }
  
    storeArtworks() {
      return this.httpClient.put( this.url +"/artworks.json", 
      this.artService.getArtworks());
    }
  
    getArtworks() {
      return this.httpClient.get&lt;HttpResponse&lt;Art[]&gt;&gt; 
    (this.url+"/artworks.json")};
    }
  
  //ART.SERVIVCE
  
  import { Art } from "../modules/art.module"
  import { Subject } from 'rxjs';
  
  export class ArtService{
      listChanged = new Subject&lt;Art[]&gt;();
  
      public list: Art[] = [];
          // new Art ("The Young Ladies of Avignon", "painting", 1907),
          // new Art ("Kiss", "painting", 1908),
          // new Art ("Dance", "painting", 1911)
  
      subject = new Subject&lt;string&gt;();
  
  
  
      setArt(artworks:Art[]=[]){
          this.list = artworks;
          this.listChanged.next(this.list);
      }
  
      getArtworks() {
          return this.list;
      }
  
      addArt(f){
          this.list.push( new Art( f.value.titel, f.value.technique, f.value.year));
      }
  
      remove(titel){
      // this.list.splice(i, 1)
          for (let i = 0; i &lt; this.list.length; i++) {
            if( this.list[i].titel === titel )
            { this.list.splice( i,1 ) }
          }
    }
  }
  
  //DashboardComponent
  
    list;
  
    constructor(
      private serverService:ServerService, private artService:ArtService ) 
      {}
  
    ngOnInit() {
      this.list = this.artService.getArtworks();
    }
  
    submit(form:NgForm){
      this.artService.addArt(form);
    }
  
    removeItem(titel){
      this.artService.remove(titel)
    }
    onSave(){
      this.serverService.storeArtworks()
        .subscribe( (res:Response) =&gt; console.log(res));
    }
  }
  </code></pre>