<div id="auctions" [@fadeAnimation]="recentAuctions.length">
    <ng-container *ngIf="!loadingAuctions; else loading">
      <div class="auction" *ngFor="let auction of recentAuctions">
        <img [src]="auction.images[0]">
        <p>{{auction.title}}</p>
        <p style="color: #ff9800;">{{auction.price | currency:'DKK':'code':'1.2-2':'da'}}</p>
        <p>{{auction.timeLeft.days}} dage,
          {{auction.timeLeft.hours}}:{{auction.timeLeft.minutes}}:{{auction.timeLeft.seconds}}</p>
      </div>
    </ng-container>
  </div>
</div>
<ng-template #loading>
  <mat-progress-spinner mode="indeterminate" diameter="75"></mat-progress-spinner>
</ng-template>

ngOnInit() {
    this.firestore.collection<Auction>('open-auctions', ref => ref.orderBy("startDate", "desc").limit(5)).get().subscribe(res => {
      res.docs.forEach(doc => {
        let auction = <Auction>doc.data();
        this.setTimeLeft(auction);
        this.recentAuctions.push(auction);
        this.countdowns.push(
          interval(1000).subscribe(result => {
            this.setTimeLeft(auction)
            console.log(auction.title);
          })
        );
      })
      this.loadingAuctions = false;
    });
  }