angular2 activando manualmente el evento de clic en un elemento particular

Estoy tratando de activar el evento de clic (o cualquier otro evento) en el elemento programáticamente.En otras palabras, quiero conocer las características similares que ofrece el método jQuery .trigger () en angular2.

¿Existe algún método integrado para hacer esto? ..... si no, por favor sugiera cómo puedo hacer esto

Considere el siguiente fragmento de código

<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>

Aquí, cuando el usuario hace clic en btnAdd , debería disparar el evento de clic en imgFile

Angular4

En vez de

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

utilizar

    this.fileInput.nativeElement.dispatchEvent(event);

porque invokeElementMethodya no será parte del renderizador.

Angular2

Use ViewChild con una variable de plantilla para obtener una referencia a la entrada del archivo, luego use el Renderer para invocar dispatchEventy disparar el evento:

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]);
  }
}

Actualizar

Dado que el equipo de Angular ya no desaconseja el acceso directo al DOM, este código más simple también se puede usar

this.fileInput.nativeElement.click()

Véase también https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

También quería una funcionalidad similar en el que tengo un control de entrada de archivos con display:noney un control Button donde quería gatillo evento click del archivo de entrada de control al hacer clic en el botón, a continuación es el código para hacerlo

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

tan simple como eso y funciona a la perfección ...

Esto funcionó para mí:

<button #loginButton ...

y dentro del controlador:

@ViewChild('loginButton') loginButton;
...
this.loginButton.getNativeElement().click();

La respuesta de Günter Zöchbauer es la correcta. Solo considere agregar la siguiente línea:

showImageBrowseDlg() {
    // from http://stackoverflow.com/a/32010791/217408
    let event = new MouseEvent('click', {bubbles: true});
    event.stopPropagation();
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, 'dispatchEvent', [event]);
  }

En mi caso, obtendría un error de "RangeError atrapado: tamaño máximo de pila de llamadas excedido" si no. (Tengo una tarjeta div que se dispara al hacer clic y el archivo de entrada en el interior)

Si desea imitar, haga clic en el elemento DOM de esta manera:

<a (click)="showLogin($event)">login</a>

y tener algo como esto en la página:

<li ngbDropdown>
    <a ngbDropdownToggle id="login-menu">
        ...
    </a>
 </li>

tu función component.tsdebería ser así:

showLogin(event) {
   event.stopPropagation();
   document.getElementById('login-menu').click();
}

Para obtener la referencia nativa a algo como un ion-input, ry usando esto

@ViewChild('fileInput', { read: ElementRef }) fileInput: ElementRef;

y entonces

this.fileInput.nativeElement.querySelector('input').click()