Angular2 How to trigger (click) event without clicking

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

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

Just landed here from a research and I resolved to make my contribution to the topic. :)

You can create and dispatch an event too:

const domEl: HTMLElement = document.createElement('div'); 
// or do whatever you have to do to get the DOM Element

function triggerEvent(el: HTMLElement, evt: Event): void {
    if (el && evt) {
        const fakeEvent = new Event(evt, {bubbles: false, cancelable: false});

        el.dispatchEvent(fakeEvent);
    }
}

// adding some events to make this example more functional, 
// but do what you have to do to bind an event to your DOM Element

domEl.addEventListener('click', (ev) => { console.log('click', ev); });
domEl.addEventListener('focus', (ev) => { console.log('focus', ev); });
domEl.addEventListener('blur', (ev) => { console.log('blur', ev); });


triggerEvent(domEl, 'click'); // to dispatch click event
triggerEvent(domEl, 'focus'); // to dispatch focus event
triggerEvent(domEl, 'blur'); // to dispatch blur event

Hope that it helps you or someone else in the futures researches. :D

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

}