delete file button

src/app/modules/songs/song/edit/edit-file/edit-file.component.html

@@ -20,7 +20,7 @@
   </div>
 
   <p *ngFor="let file of (files$|async)">
-    <app-file [file]="file"></app-file>
+    <app-file [file]="file" [songId]="songId"></app-file>
   </p>
 </app-card>
 

src/app/modules/songs/song/edit/edit-file/file/file.component.html

@@ -1,3 +1,5 @@
-<a [href]="url$|async" target="_blank">
-  {{name}}
-</a>
+<button (click)="onDelete()" mat-icon-button>
+  <fa-icon [icon]="faTrash"></fa-icon>
+</button>
+
+<a [href]="url$|async" target="_blank">{{name}}</a>

src/app/modules/songs/song/edit/edit-file/file/file.component.less

@@ -0,0 +1,3 @@
+button {
+  margin: -5px 0;
+}

src/app/modules/songs/song/edit/edit-file/file/file.component.ts

@@ -1,28 +1,33 @@
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
-import {AngularFireStorage} from '@angular/fire/storage';
+import {faTrashAlt} from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import {FileService} from '../../../../services/file.service';
 
 @Component({
   selector: 'app-file',
   templateUrl: './file.component.html',
   styleUrls: ['./file.component.less']
 })
-export class FileComponent implements OnInit {
+export class FileComponent {
   public url$: Observable<string>;
   public name: string;
+  public faTrash = faTrashAlt;
+  @Input() songId: string;
+  private fileId: string;
+  private path: string;
 
-  constructor(private storage: AngularFireStorage) {
+  constructor(private fileService: FileService) {
   }
 
   @Input() set file(file: File) {
-
-    const ref = this.storage.ref(file.path + '/' + file.name);
-    this.url$ = ref.getDownloadURL();
+    this.url$ = this.fileService.getDownloadUrl(file.path + '/' + file.name);
     this.name = file.name;
-
+    this.fileId = file.id;
+    this.path = file.path + '/' + file.name;
   };
 
-  ngOnInit(): void {
+  public async onDelete(): Promise<void> {
+    await this.fileService.delete(this.path, this.songId, this.fileId);
   }
 }

src/app/modules/songs/song/song.component.html

@@ -39,11 +39,11 @@
     </app-button-row>
 
   </app-card>
-  <ng-template *ngIf="(files$|async) as files">
+  <ng-container *ngIf="(files$|async) as files">
     <app-card *ngIf="files.length>0" heading="Anhänge">
       <p *ngFor="let file of (files$|async)">
         <app-file [file]="file"></app-file>
       </p>
     </app-card>
-  </ng-template>
+  </ng-container>
 </div>