How to Programmatically Trigger 'Click' Event in Angular 6?

Question

Essentially, I want to trigger the input button in the page using TypeScript

see https://stackoverflow.com/questions/45027331/angular2-how-to-trigger-click-event-without-clicking/45027961 — hamilton.lima, Aug 15 '18 at 15:22

score 8 · Answer 1 · edited Sep 10 '19 at 07:32

8

//its no different than doing it in vanilla JS

let elem = document.getElementById('submitBtn');

let evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });

elem.dispatchEvent(evt);

edited Sep 10 '19 at 07:32

Amit Soni

3,216
6
31
50

answered Aug 15 '18 at 12:59

Thomas Lang

111
6

1

I am getting error -ERROR TypeError: Cannot read property 'dispatchEvent' of null – Techdive Feb 26 '19 at 12:20

score 4 · Answer 2 · answered Apr 09 '19 at 06:14

Use @ViewChild as follows in .ts

 @ViewChild('fileInput') fileInput: ElementRef;

 let inputElement: HTMLElement = this.fileInput.nativeElement as HTMLElement;
 inputElement.click();

In your .html,

 <input #fileInput type="file" ng2FileSelect (onFileSelected)="fileUpload($event)"/>

score 1 · Answer 3 · answered Apr 08 '21 at 06:27

1

JS code:

document.getElementById('mat-checkbox-1-input').click();

Happy Coding!!!

answered Apr 08 '21 at 06:27

sweetnandha cse

705
7
16

How to Programmatically Trigger 'Click' Event in Angular 6?

3 Answers3