trigger click event in angular 2

angular2 disparando manualmente evento de clic en un elemento particular

Question

Estoy tratando de activar un evento de clic (o cualquier otro evento) en el elemento mediante programación, en otras palabras, quiero conocer las características similares que ofrece el método jQuery .trigger () en angular2.

¿Hay algún método incorporado para hacer esto? ..... si no, 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 , debe activar el evento click en imgFile

Answer 1

Esto funcionó para mí:

<button #loginButton ...

y dentro del controlador:

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

Answer 2

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

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

En mi caso, me daría un error "Capturado RangeError: tamaño máximo de pila de llamadas excedido" si no. (Tengo una tarjeta div disparando al hacer clic y el archivo de entrada dentro)

Answer 3

Si desea imitar, haga clic en el elemento DOM como este:

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

y tener algo como esto en la página:

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

su función en component.ts debería ser así:

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

Answer 4

También quería una funcionalidad similar donde tengo un control de entrada de archivos con display:none y un control de botón donde quería activar el evento de clic del control de entrada de archivos cuando hago clic en el botón, a continuación se muestra 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 está funcionando perfectamente ...

Answer 5

Angular4

En lugar de

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

utilizar

    this.fileInput.nativeElement.dispatchEvent(event);

porque invokeElementMethod ya 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 dispatchEvent para activar 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://.com/a/32010791/217408
    let event = new MouseEvent(''click'', {bubbles: true});
    this.renderer.invokeElementMethod(
        this.fileInput.nativeElement, ''dispatchEvent'', [event]);
  }
}

Actualizar

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

this.fileInput.nativeElement.click()

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