I'm working on an Angular project.

When I import several documents I have the message "two documents". nothing problematic.
[![enter image description here](https://i.stack.imgur.com/bUraA.png)](https://i.stack.imgur.com/bUraA.png)

The problem arises when I press the delete button that I created.
It allows to empty my list but to display there is always written "two documents"

I wish I had that. like when we get to the page for the first time ("no file selected") :

[enter image description here](https://i.stack.imgur.com/sDuA2.png)
-------------------------------------------------------------------

How could I do to reload this input without reloading the page?

My code : 

html :

```
<div class="form-group">
          <label for="pj">Pièce jointe</label>
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <input type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>
            <button type="button" (click)="clearFile()" class="btn btn-link">
              <i class="fas fa-trash fa-lg"></i>
            </button>
          </div>
        </div>

```

ts :

```
 clearFile() {
 this.message.files = null;
 }

```

Thanks