DEV Community

How to Programmatically Trigger 'Click' Event in Angular 4 & 5

Monique Dingding on February 19, 2018

Resources in Angular 4 (and 5) are scarce. Really. Sometimes I get so lost in sifting through Stack Overflow that I end up translating the answers ...

Read full post

Matteo Rigon • Feb 19 '18 • Edited

Two things I'd like to point out:

You should always use a button instead of a link if you just need to trigger an action
Instead of the openFileBrowser method which is a more "jQuerish" approach you can do that in the angular way with template ref:

<input id="tenantPhotoID" type="file" #photoInput >
<button type="button" (click)="photoInput.click()"  >

Monique Dingding • Feb 19 '18

Hi, Matteo! I am not - by any means - an expert in Angular but I just want to help other developers who may be lost right now looking for solutions by sharing mine. :-) Thanks for these pointers!

jamesbcn • Apr 30 '18

This was exactly what I was looking for! Much appreciated.

Óscar • Mar 26 '19

Same over here... :)

Viktor • Dec 19 '18

In this case you've missed $event.stopPropagation(), which could be important in some cases.
So, method still can make sense in this case if you'd like to keep your html clean.

nate nate • Jun 12 '19

Mine resulted to 'ERROR TypeError: Cannot read property 'click' of undefined'. Did I missed out something?

Matteo Rigon • Jun 12 '19

Hello, sadly i switched to Vue a long time ago so i may be a bit behind current Angular, but if you get that error it appears that you forgot to add to the input the reference attribute #photoInput.

Just tested it here and the code appears to be working as originally wrote:
stackblitz.com/edit/angular-playgr... ( checkout hello-framework/hello-framework.component.html )

ERROR 401 • Aug 16 '21

Hi matteo may I ask if this will work when you use #templateRef using material UI in angular?

manuchadha1979 • Jan 16 '19

Hi Monique, how do you unit-test the example? I have created a similar application but I am unable to unit-test it as I don't know how to trigger the change event from file selector. I have created a question in StackOverflow. Would it be possible for you to take a look at stackoverflow.com/questions/542022...

leomayer • Jul 24 '18

I like this sample more or less cuz the element-id could be used in a dynamical way. i.e. if I don't know the id at the codeing time but only on runtime I can still use the given approach. Which I like :-)

Itamar Lev • Oct 23 '19

Instead of getElementById there's a good way of controlling the elements on the template by using the @ViewChild Directive. (Angular 8)

in the template adding a local reference to the button: (#photoInputButton)

in the component
adding the @ViewChild directive referencing the photoInputButton:

@ViewChild('photoInputButton', {static: false}) photoInputButton: ElementRef;
//{static: true} => only if it's being used in the ngOnInit phase

Now you have an ElementRef - you can trigger the click:

this.photoInputButton.nativeElement.dispatchEvent(new MouseEvent('click'));

Vaibhav Arora • Sep 2 '19

Need 1 help to understand guys.

When Angular suggests(I guess so) to use Renderer2 and not directly access your HTML DOM, doesn't that future proof law or whatever we call that, applies to this code.

Is there any other way if we had to do it reactively and not template wise, at least add some custom code in between like "event.preventDefault()"

Gene • Sep 23 '18

It's nice to see fellow Filipinos active in this community!

nate nate • Jun 12 '19

Hi!

I don't know if this is still active but I have some questions.

I've tried your approach above and also the one Matteo Rigon provided. Both of them resulted to 'ERROR TypeError: Cannot read property 'click' of undefined'. Did I missed out something before applying these approaches to trigger click event? I'm using Angular 7 by the way.

Thanks

Andrea Gherardi • Feb 20 '18

I found a solution that is more elegant, standard, degrades gracefully and is framework-agnostic. Check it out here: tympanus.net/codrops/2015/09/15/st...