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 7 · Answer 1 · edited Sep 10 '19 at 07:32

7

//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,051
5
27
47

answered Aug 15 '18 at 12:59

Thomas Lang

101
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 0 · Answer 3 · answered Apr 08 '21 at 06:27

0

JS code:

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

Happy Coding!!!

answered Apr 08 '21 at 06:27

sweetnandha cse

57
1
6

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

3 Answers3