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.

Answer 1

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.