How to Programmatically Trigger 'Click' Event in Angular 4 & 5
Tags: angular, frontend, javascript
Published: 2018-02-19 15:57:15

---
title: How to Programmatically Trigger 'Click' Event in Angular 4 & 5
published: true
description: For code newbies who just want to get sh*t done.
tags: angular, frontend, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/se3lwt047zm6w7pchsq8.png
---

Resources in Angular 4 (and 5) are scarce. Really. Sometimes I get so lost in sifting through Stack Overflow that I end up translating the answers that I have found in older versions (1.x and 2.x) using the latest Angular docs. 

One of the tasks in the project that I am working on involves uploading a file using either a drag-and-drop box or by clicking _browse_, like so:

![File Upload Page] (https://thepracticaldev.s3.amazonaws.com/i/se3lwt047zm6w7pchsq8.png)

Essentially, I want to trigger the file input button hidden in the page to open the file browser when _browse_ (which is an anchor tag) is clicked.

For newbs like me, I initially resorted to search for packages in NPM, only to know that some are barely maintained, not tested for compatibility with newer versions of Angular, or have too many features that I do not need.

Realizing my mistake, I decided to look for a simpler answer but many of them still require me to import modules that bloat the project.

Before starting, here are my stats:

```
Angular CLI: 1.7.0-beta.3
Node: 8.9.4
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cli: 1.7.0-beta.3
@angular-devkit/build-optimizer: 0.2.0
@angular-devkit/core: 0.2.0
@angular-devkit/schematics: 0.2.0
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.0-beta.3
@schematics/angular: 0.2.0
@schematics/package-update: 0.2.0
typescript: 2.3.4
webpack: 3.10.0
```
I particularly disliked `angular.element` as it is just a wrapper that still utilizes jQuery and as much as possible I like to keep my code free from imports that I can't reuse. Ultimately, I came across a more efficient solution by using `HTMLElement`, an interface from [Web API] 
(https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).

So this is how I did it, to give you (and future me) a guide:

##The Template
The page view is named `uploadFile.component.html`

![Upload Image](https://thepracticaldev.s3.amazonaws.com/i/3xtk11l34hx2cxlpzusw.png)

Important stuff:
- The class `.hide-style` contains `{display: none}` to hide the file input.
- The id `#tenantPhotoId` is an identifier used to reference the file input.
- The variable `tenantIDFileName` binds the file name of the file to be displayed on the page.


##The Component
The TS file is named `uploadFile.component.ts`

![Upload Image](https://thepracticaldev.s3.amazonaws.com/i/spwdwoj8xccu2ffbj3uz.png)


Important stuff:
- The method `onFileChange($event)` displays the file name of the file being uploaded by assigning it on the variable `tenantIDFileName`.
- The method `openFileBrowser($event)` triggers the click event on the file browser.


##Walkthrough of the Process
When _browse_ is clicked, `openFileBrowser($event)` is called with `$event` as the argument. This is so we can use `preventDefault()` to prevent the normal behavior of an anchor tag of redirecting to the page it is pointed to.

Then, the value is fetched using the ID of the file input using `document.getElementById()` and is casted to an `HTMLElement` type.

[HTMLElement] 
(https://www.javascripture.com/HTMLElement) represents any element in the document and implements _Event Handler_ interface, so now we can call `click()`. Successfully, the file browser is triggered to open. 

Whenever a file is selected, `onFileChange($event)` will be called and the `tenantIDFileName` variable will be assigned as the value of the filename and is displayed on the page.

**Note that in the actual file upload process, you can consume an API endpoint that will store the data on your server or call a third-party service like AWS S3.**

EDIT: If you've found a better solution then we can help each other out by sharing as many references as we can. :-) 

There you go! Happy hacking!