angular2 manually firing click event on particular element

Question

I am trying to fire click event (or any other event) on element programatically , In other word I want to know the similar features as offered by jQuery .trigger() method in angular2.

Is there any built in method to do this? ..... if not please suggest how can i do this

Consider the following code fragment

<form [ngFormModel]="imgUploadFrm"           (ngSubmit)="onSubmit(imgUploadFrm)">         <br>         <div class="input-field">             <input type="file" id="imgFile" (click)="onChange($event)" >         </div>         <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button>  </form> 

Here when user click the btnAdd it should fire the click event on imgFile

Answer 1

Angular4

Instead of

    this.renderer.invokeElementMethod(         this.fileInput.nativeElement, 'dispatchEvent', [event]); 

use

    this.fileInput.nativeElement.dispatchEvent(event); 

because invokeElementMethod won't be part of the renderer anymore.

Angular2

Use ViewChild with a template variable to get a reference to the file input, then use the Renderer to invoke dispatchEvent to fire the event:

import { Component, Renderer, ElementRef, ViewChild } from '@angular/core'; @Component({   ...   template: ` ... <input #fileInput type="file" id="imgFile" (click)="onChange($event)" > ...` }) class MyComponent {   @ViewChild('fileInput') fileInput:ElementRef;    constructor(private renderer:Renderer) {}    showImageBrowseDlg() {     // from http://stackoverflow.com/a/32010791/217408     let event = new MouseEvent('click', {bubbles: true});     this.renderer.invokeElementMethod(         this.fileInput.nativeElement, 'dispatchEvent', [event]);   } } 

Update

Since direct DOM access isn't discouraged anymore by the Angular team this simpler code can be used as well

this.fileInput.nativeElement.click() 

See also https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

Answer 2

I also wanted similar functionality where I have a File Input Control with display:none and a Button control where I wanted to trigger click event of File Input Control when I click on the button, below is the code to do so

<input type="button" (click)="fileInput.click()" class="btn btn-primary" value="Add From File"> <input type="file" style="display:none;" #fileInput/> 

as simple as that and it's working flawlessly...