Angular2 How to trigger (click) event

Question

I have a div and ion-input #fileInput type="file" accept="image/*" id="fileInput" [(ngModel)]="imageFilePath" (ionChange)="imageFilePath_change($event)" ></ion-input>

How to simulate the click on the ion-input component using the div?

my html code is:

<div (click) = "fileInput.click()">
    <img src="assets/img/camera_button.png" [ngStyle]="{'position': 'fixed', 'top': '30vw', 'left': '32vw', 'height': '30px', 'color': '#0080FF'}">
    <ion-input #fileInput type="file" accept="image/*" id="fileInput" [(ngModel)]="imageFilePath" (ionChange)="imageFilePath_change($event)" ></ion-input>
    <span [ngStyle]="{'position': 'fixed', 'top': '32vw', 'left': '42vw', 'color': '#0080FF'}">{{ 'addMorePhotosBtn' | translate }}</span>
</div>

the error is:

TypeError: jit_nodeValue_20(...).click is not a function

Your #fileInput so ion-input hasn't function named click — Efe
– Efe, Commented Jun 13, 2018 at 13:17
Why do you need the input to be clicked? Why not just call the component method from the original click event handler? — Teddy Sterne
– Teddy Sterne, Commented Jun 13, 2018 at 13:21

Pang · Accepted Answer · 2018-06-15 09:11:35Z

1

Here is an my working Example for an file while clicking div.

Html File

 <ion-list>
       <ion-item (click)="onImageClick()">
           <div>
              <ion-icon ios="ios-add-circle" md="md-add-circle"></ion-icon>
                  Add Files
              </div>
       </ion-item>
   </ion-list>

Typescript File

public onImageClick() {

    let input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*'); //you can change also file type as **'file/*'**
    input.setAttribute("multiple", ""); // If you dont want multiple select file pls remove this line

    input.addEventListener('change', (event: any) => {      
      let fileList: File[] = event.target.files;
      console.log("File List Object Value",fileList);
    });

    input.click();
  }

Worked perfect for me tested.

edited Jun 15, 2018 at 9:11

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jun 14, 2018 at 14:27

Karnan Muthukumar

1,8731 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 How to trigger (click) event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related