Angular 4 dispatchEvent with custom event

Question

My requirment is to fire event from the code to a parent hosting component.

I used the first answer here as a reference: angular2 manually firing click event on particular element

If I try this, it works well:

this.itemHost.viewContainerRef.element.nativeElement.dispatchEvent(new Event('click'));

In the parent component I wrote this:

(click)="go()"

It arrives to the go method when the above code occurs.

But this doesn't work if I do it with some custom event name, e.g.:

this.itemHost.viewContainerRef.element.nativeElement.dispatchEvent(new Event('customEvent'));

and in the parent component:

(customEvent)="go()"

How can I do it with custom event?

I tried and didn't success with it. can you giv eme example how to declare it? — Batsheva, Jul 25 '17 at 08:38

yurzui · Accepted Answer · 2017-07-25T14:00:56.583

18

Your event is not bubbling. Try it:

.dispatchEvent(new Event('customEvent', { bubbles: true }));

Plunker Example

edited Jul 25 '17 at 14:00

answered Jul 25 '17 at 08:38

yurzui

205,937
32
433
399

Can I pass event args here too? – Batsheva Jul 25 '17 at 08:51
Yes, use detail – yurzui Jul 25 '17 at 08:51
where do I put it? – Batsheva Jul 25 '17 at 08:53
Here is en example https://stackoverflow.com/questions/42957305/angular2-can-i-pass-custom-parameters-to-host-listener-event – yurzui Jul 25 '17 at 08:55
Use CustomEvent in this case https://plnkr.co/edit/pp6sgnrmtdoY2c7Wzh8h?p=preview – yurzui Jul 25 '17 at 09:02

Poul Kruijt · Answer 2 · 2022-07-18T14:16:34.393

Use @Output() to have custom events inside your components. In the example below it is triggered while clicking on a div, but you can obviously have it emit whenever. Try to avoid the use of nativeElement as much as possible, because this will prevent running your application in any other environment, but the browser

parent

@Component({
   selector: 'parent',
   template: `<child (customEvent)="onCustomEvent($event)"></child>`
})
export class ParentComponent {

  onCustomEvent(response: string): void {
    console.log(response);
  }
}

child

@Component({
   selector: 'child',
   template: `<div (click)="customEvent.emit('blabla')"></div>`
})
export class ChildComponent {

  @Output()
  customEvent: EventEmitter<string> = new EventEmitter<string>();
  
}

Angular 4 dispatchEvent with custom event

2 Answers2