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
– Batsheva, Commented Jul 25, 2017 at 8:38

yurzui · Accepted Answer · 2017-07-25 14:00:56Z

18

Your event is not bubbling. Try it:

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

Plunker Example

edited Jul 25, 2017 at 14:00

answered Jul 25, 2017 at 8:38

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

5 Comments

Batsheva Over a year ago

Can I pass event args here too?

yurzui Over a year ago

Yes, use detail

Batsheva Over a year ago

where do I put it?

yurzui Over a year ago

Here is en example stackoverflow.com/questions/42957305/…

yurzui Over a year ago

Use CustomEvent in this case plnkr.co/edit/pp6sgnrmtdoY2c7Wzh8h?p=preview

Poul Kruijt · Accepted Answer · 2022-07-18 14:16:34Z

2

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

edited Jul 18, 2022 at 14:16

answered Jul 25, 2017 at 8:43

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Collectives™ on Stack Overflow

Angular 4 dispatchEvent with custom event

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related