javascript - Choose multiple files with a delete button nearby angular

Question

Introduction: I have a table where in a column it consists of an option to choose or upload files as an input to the table. I have written code in such a way that I can choose multiple files all at once.

My problem What I want is that after I choose those multiple files(lets say 3 for an example), I need a x or a close symbol or a delete button near the filename. So that When I click that I could unchoose or unselect or delete the particular file alone. I am attaching a sample image of how I want.

And please tell me if there is any way to remove list values by index

Sampleimageofthat

Kindly comment below if my question is unclear

My html code:

 <td>
    <ng-container>
     <input style="width:240%" type="file" id="file" multiple
         (change)="getFile($event)" >
      </ng-container>
</td>

My ts code:

myFiles:string [] = [];
getFile (e) {
for (var i = 0; i < e.target.files.length; i++) { 
  this.myFiles.push(e.target.files[i]);
}}

I have also attached my stackblitz below for your reference:

Stackblitz: https://stackblitz.com/edit/angular-ivy-4vnwed?file=src%2Fapp%2Fapp.component.ts

Answer 1

In your html your forgot to add a "let" before f variable

<li *ngFor="let f of files">

In your app.components.ts file, try to use filter not map. this.files.map() isn't filtering out the elements. Console log the output to debug

  removeFile(i: number) {
   this.files = this.files.filter(x => x.index != i);
  }