How to use id of an input element for a button click event in Angular

Question

I have a template as

<input class="ng-hide"  id="{{f}}" multiple type="file" style="display:none;"
(change)="getFiles($event)" />
<button mat-raised-button type="button" class="mat-raised" color="primary"
onclick="document.getElementById('{{f}}').click()">{{f}}</button>

Here f is a string variable with dynamic value and want to pass the same onclick function but I am getting error as

error NG8002: Can't bind to 'onclick' since it isn't a known property of 'button'.

4     onclick="document.getElementById('{{f}}').click()">{{f}}</button>

How to resolve this issue. I am using Angular 9.

Barremian · Accepted Answer · 2020-05-25 11:40:50Z

2

Instead of document.getElementById() you could use Angular template reference variable. In addition to providing more functionalities, it is the Angulary way of doing things. Also in Angular you need to bind to the (click) event instead of the onclick event. Try the following

<input #inputFile class="ng-hide" multiple type="file" style="display:none;"
(change)="getFiles($event)" />

<button mat-raised-button type="button" class="mat-raised" color="primary"
(click)="inputFile.click()">{{f}}</button>

Here inputFile is the template reference variable.

answered May 25, 2020 at 11:40

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Collectives™ on Stack Overflow

How to use id of an input element for a button click event in Angular

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related