DEV Community

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

Collapse
 
itamarlev profile image
Itamar Lev

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'));