Angular2 How to trigger (click) event without clicking

Question

I want to pass data from HTML to the component so I've created an event like this:

<div id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div>

And in component:

passCharge(charge){
   this.charge = charge;
   console.log(this.charge,"give me the number")
}

If I click the event, I see everything's working fine. But I want to trigger this click event automatically since I want the component to use 'this.charge' value right away once the component is done the loading.

Is there any way I can trigger (click) event automatically?

You can call the method on ngOnInit() { } , it will be called once the page is loaded. — Deepa, Jul 11 '17 at 06:55
I can't just call the method passCharge(r.value['charge']); in ngOnInit() casue component can't read r.value['charge'] it won't compile If I add otheriwse, it doens't print what I want — Lea, Jul 11 '17 at 07:17

score 76 · Accepted Answer · 2019-05-17T08:56:31.907

76

Give it a ViewChild reference :

<div #myDiv id="tutor-price" (click)="passCharge(r.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{r.value['charge']}} </span></div>

In your component :

@ViewChild('myDiv') myDiv: ElementRef<HTMLElement>;

triggerFalseClick() {
    let el: HTMLElement = this.myDiv.nativeElement;
    el.click();
}

edited May 17 '19 at 08:56

answered Jul 11 '17 at 07:23

1

What is HTMLElement? I tried this but it's printing error ./MainComponent class MainComponent - inline template:57:8 caused by: Cannot read property 'nativeElement' of undefined – Lea Jul 11 '17 at 07:35
HTMLElement is an HTML element, what is usually returned by `document.getElementById()` in native JS. This error occurs because you didn't declare the elementRef. – Jul 11 '17 at 07:39
By declare u meant this? 1.import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; 2. constructor( el:ElementRef) { } I tried both still the same error :( – Lea Jul 11 '17 at 07:50
Don't put it in the contructor, put it as a local variable. – Jul 11 '17 at 08:01
Also, where do you call the fakeClick function ? – Jul 11 '17 at 08:01
i call the fakeClick function from ngOnInit – Lea Jul 11 '17 at 08:01
implement AfterViewInit and call it in it then (OnInit hasn't loaded the view yet) – Jul 11 '17 at 08:06
But if you want to test if it works, simply add a timeout ! – Jul 11 '17 at 08:08
ERROR TypeError: el.click is not a function in chrome. I get the valid HTMLElement. – Sol Jul 12 '18 at 07:46
If you have the `HTMLElement` and can't trigger a `click`, then please provide a [mcve] and make a question on SOF. – Jul 12 '18 at 07:47
@trichetriche why not just "this.myDiv.nativeElement.click();" – Xan Jan 21 '19 at 12:23
2

@Xan because I explain, instead of giving the quickest solution. – Jan 21 '19 at 12:51
this.myDiv.nativeElement; is undefined ?? doesn't work even after use after AfterViewInit in angular 7 – ThinkTank Apr 29 '20 at 09:10
@ViewChild('myDiv', {static: true}) myDiv: ElementRef; – Hardik Patel Jan 06 '21 at 11:45

Gaurav Krishn · Answer 2 · 2017-12-27T04:48:06.533

You can trigger click event in ngOnInit() like this: `

<div #divClick id="tutor-price" (click)="passCharge(r.value['charge'])">
    <span id="month">월 8회</span> 
    <span id="price"> {{r.value['charge']}} </span>
</div>`

In component.ts file

import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
@Component({
  //component decoraters
})
export class MyComponent implements OnInit, AfterViewInit {
  @ViewChild('divClick') divClick: ElementRef;
  ngOnInit() {
      // your other code
    setTimeout(() => {
    this.divClick.nativeElement.click();
    }, 200);
  }
}

score 0 · Answer 3 · answered Jul 11 '17 at 08:03

0

<div #tutor id="tutor-price" (click)="passCharge(tutor.value['charge'])"><span id="month">월 8회</span> <span id="price"> {{tutor.value['charge']}} </span></div>

Hope so this can help you ..

import { Component, OnInit } from '@angular/core';
tutor:any;
@Component({
      //your component decorater tags
})
export class MyComponent implements OnInit{
   ngOnInit(){
      this.charge = this.tutor.value['charge'];
   }
   passCharge(charge){
   this.charge = charge;

}

answered Jul 11 '17 at 08:03

Liyaquet Hussain

101
5

How would this even compile? passCharge(charge) and this.charge = charge is being done inside the class itself and not in any method? – Travis May 22 '20 at 14:41

Cedric Ipkiss · Answer 4 · 2021-02-09T14:27:25.897

Expanding on the accepted answer, if you get the error "Cannot read property 'nativeElement' of undefined" or even "Cannot read property click of undefined", as OP clearly states in the comments to answer provided, use this solution:

If you want to get a reference of an element that hosts a component or directive you need to specify that you want the element instead of the component or directive

@ViewChild('myDiv', { read: ElementRef }) myDiv: ElementRef<HTMLElement>;

Angular2 How to trigger (click) event without clicking

4 Answers4

Linked