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.

Your <input type="file"> is hidden anyway, so try putting it outside the div with the (click)` handler. I suspect some conflict because you are trying to simulate a click on an element that is inside the div you click — Jeremy Thille
– Jeremy Thille, Commented Apr 23, 2021 at 12:55
Hey, @JeremyThille thank you that did the trick, is there a way to unhide the button when the download is completed though? — MARK
– MARK, Commented Apr 23, 2021 at 13:06
I think an even better solution would be to put *ngIf="this.isButtonVisible" directly on the top div, the one with the (click) handler, with the button inside. This way, the (click) hooks and unhooks at the same time the div gets destroyed and rebuilt. — Jeremy Thille
– Jeremy Thille, Commented Apr 23, 2021 at 13:08
Hey @JeremyThille I just saw your replay, I tried what you suggested but now nothing happens when the button is clicked for some reason it gets hidden but the input window does not show — MARK
– MARK, Commented Apr 27, 2021 at 12:04

pjpscriv · Accepted Answer · 2022-03-26 01:37:29Z

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

edited Mar 26, 2022 at 1:37

answered Apr 23, 2021 at 13:24

pjpscriv

1,5441 gold badge17 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Hide button when clicked in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related