Hide button when clicked in angular

Question

I have a button that wraps around an input to upload files to my angular app, I want to add a click event to listen for when the button is clicked and hide it, so every time the button is clicked to upload a file it gets hidden because I intend to replace it with a progress bar.

Here is the code I tried :

<div (click)="fileField.click()" (fileDropped)="upload($event)">
      <div *ngIf="this.isButtonVisible">
      <button
        class="button is-primary mt-2"
        (click)="this.isButtonVisible = false"
      >
        <input
          type="file"
          name="txts"
          #fileField
          (change)="upload($event.target.files)"
          hidden
          multiple
        />
        Upload
      </button></div>
      <!-- Progress Bar -->
      <div *ngIf="progress">
        <div class="progress is-primary form-group">
          <div
            class="progress-bar progress-bar-striped bg-success"
            role="progressbar"
            [style.width.%]="progress"
          ></div>
        </div>
      </div>
    </div>

I get the following error Property 'fileField' does not exist on type 'SourceComponent'. it has to do with the ngIF how do I fix it?

Thank you in advance.

Answer 1

You're right the issue has to do with the *ngIf. One way of fixing the error is by using the hidden directive to hide the div instead:

 <div [hidden]="!this.isButtonVisible">

StackBlitz example