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?

Solution 1

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();
}

Solution 2

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);
  }
}

Solution 3

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>;

Comments

[eko]

Call the method?

[Deepa]

You can call the method on ngOnInit() { } , it will be called once the page is loaded.

[Lea]

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

[eko]

What is r in your code?

[Lea]

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

[Admin]

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.

[Lea]

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 :(

[Admin]

Don't put it in the contructor, put it as a local variable.

[Admin]

Also, where do you call the fakeClick function ?

[Lea]

i call the fakeClick function from ngOnInit

[Admin]

implement AfterViewInit and call it in it then (OnInit hasn't loaded the view yet)

[Admin]

But if you want to test if it works, simply add a timeout !

[Harshal]

ERROR TypeError: el.click is not a function in chrome. I get the valid HTMLElement.

[Admin]

If you have the HTMLElement and can't trigger a click, then please provide a minimal reproducible example and make a question on SOF.

[Alessandro Scarozza]

@trichetriche why not just "this.myDiv.nativeElement.click();"

[Admin]

@Xan because I explain, instead of giving the quickest solution.

[ThinkTank]

this.myDiv.nativeElement; is undefined ?? doesn't work even after use after AfterViewInit in angular 7

[Travis]

How would this even compile? passCharge(charge) and this.charge = charge is being done inside the class itself and not in any method?

[Hardik Patel]

@ViewChild('myDiv', {static: true}) myDiv: ElementRef;