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     lt form  ngFormModel   imgUploadFrm             ngSubmit   onSubmit imgUploadFrm   gt           lt br gt           lt div class  input-field  gt               lt input type  file  id  imgFile   click   onChange  event    gt           lt  div gt           lt button id  btnAdd  type  submit   click   showImageBrowseDlg      gt Add Picture lt  button gt    lt  form gt    Here when user click the btnAdd it should fire the click event on imgFile

User · Accepted Answer

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         lt input  fileInput type  file  id  imgFile   click   onChange  event    gt          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

User · Answer

If you want to imitate click on the DOM element like this    lt a  click   showLogin  event   gt login lt  a gt    and have something like this on the page    lt li ngbDropdown gt       lt a ngbDropdownToggle id  login-menu  gt                   lt  a gt    lt  li gt    your function in component ts should be like this   showLogin event       event stopPropagation       document getElementById  login-menu   click

User · Answer

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   lt input type  button   click   fileInput click    class  btn btn-primary  value  Add From File  gt   lt input type  file  style  display none    fileInput  gt    as simple as that and it s working flawlessly

User · Answer

G  nter Z  chbauer s answer is the right one  Just consider adding the following line   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          In my case I would get a  caught RangeError  Maximum call stack size exceeded  error if not   I have a div card firing on click and the input file inside

User · Answer

To get the native reference to something like an ion-input  ry using this  ViewChild  fileInput     read  ElementRef    fileInput  ElementRef   and then this fileInput nativeElement querySelector  input   click

User · Answer

This worked for me    lt button  loginButton       and inside the controller    ViewChild  loginButton   loginButton      this loginButton getNativeElement   click

[angular] angular2 manually firing click event on particular element

Examples related to angular

Examples related to angular2-forms