Mixing
Listen to Custom DOM Events in Angular
I use an Angular library, which has a component, which uses CustomEvents to dispatch something, like this:
const domEvent = new CustomEvent('unselect', {
bubbles: true
});
this.elementRef.nativeElement.dispatchEvent(domEvent);
How can I listen to this Event in the parent component?
I know it is discouraged and I should normally use EventEmitters. But I have no access to overwrite the child component and there is no @Output Event defined. So this is the only thing I could use.
javascript html angular typescript
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
add a comment |
I use an Angular library, which has a component, which uses CustomEvents to dispatch something, like this:
const domEvent = new CustomEvent('unselect', {
bubbles: true
});
this.elementRef.nativeElement.dispatchEvent(domEvent);
How can I listen to this Event in the parent component?
I know it is discouraged and I should normally use EventEmitters. But I have no access to overwrite the child component and there is no @Output Event defined. So this is the only thing I could use.
javascript html angular typescript
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
did the answer and working example help you resolve the issue?
– Alexander Staroselsky
Nov 26 '18 at 18:33
add a comment |
I use an Angular library, which has a component, which uses CustomEvents to dispatch something, like this:
const domEvent = new CustomEvent('unselect', {
bubbles: true
});
this.elementRef.nativeElement.dispatchEvent(domEvent);
How can I listen to this Event in the parent component?
I know it is discouraged and I should normally use EventEmitters. But I have no access to overwrite the child component and there is no @Output Event defined. So this is the only thing I could use.
javascript html angular typescript
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
I use an Angular library, which has a component, which uses CustomEvents to dispatch something, like this:
const domEvent = new CustomEvent('unselect', {
bubbles: true
});
this.elementRef.nativeElement.dispatchEvent(domEvent);
How can I listen to this Event in the parent component?
I know it is discouraged and I should normally use EventEmitters. But I have no access to overwrite the child component and there is no @Output Event defined. So this is the only thing I could use.
javascript html angular typescript
javascript html angular typescript
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
edited Nov 20 '18 at 17:15
Yashwardhan Pauranik
1,94811327
1,94811327
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
asked Nov 20 '18 at 16:08
user5417542user5417542
5852726
5852726
did the answer and working example help you resolve the issue?
– Alexander Staroselsky
Nov 26 '18 at 18:33
add a comment |
did the answer and working example help you resolve the issue?
– Alexander Staroselsky
Nov 26 '18 at 18:33
did the answer and working example help you resolve the issue?
– Alexander Staroselsky
Nov 26 '18 at 18:33
did the answer and working example help you resolve the issue?
– Alexander Staroselsky
Nov 26 '18 at 18:33
add a comment |
1 Answer
1
active
oldest
votes
You can use HostListener to listen for this custom event. The following example triggers the custom event from a child component with the parent component listening for the event. You can even use args (second argument) such as ['$event.target'] to determine what element triggered the event.
This uses ngAfterViewInit() lifecycle hook, but it's just for demonstration and just to ensure the element ref is ready.
Parent:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@HostListener('unselect', ['$event.target'])
onUnSelect(el) {
console.log(el); // element that triggered event, in this case HTMLUnknownElement
console.log('unselect triggered');
}
}
Child:
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const domEvent = new CustomEvent('unselect', { bubbles: true });
this.el.nativeElement.dispatchEvent(domEvent);
}
}
Here is an example in action.
Hopefully that helps!
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397035%2flisten-to-custom-dom-events-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use HostListener to listen for this custom event. The following example triggers the custom event from a child component with the parent component listening for the event. You can even use args (second argument) such as ['$event.target'] to determine what element triggered the event.
This uses ngAfterViewInit() lifecycle hook, but it's just for demonstration and just to ensure the element ref is ready.
Parent:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@HostListener('unselect', ['$event.target'])
onUnSelect(el) {
console.log(el); // element that triggered event, in this case HTMLUnknownElement
console.log('unselect triggered');
}
}
Child:
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const domEvent = new CustomEvent('unselect', { bubbles: true });
this.el.nativeElement.dispatchEvent(domEvent);
}
}
Here is an example in action.
Hopefully that helps!
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
add a comment |
You can use HostListener to listen for this custom event. The following example triggers the custom event from a child component with the parent component listening for the event. You can even use args (second argument) such as ['$event.target'] to determine what element triggered the event.
This uses ngAfterViewInit() lifecycle hook, but it's just for demonstration and just to ensure the element ref is ready.
Parent:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@HostListener('unselect', ['$event.target'])
onUnSelect(el) {
console.log(el); // element that triggered event, in this case HTMLUnknownElement
console.log('unselect triggered');
}
}
Child:
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const domEvent = new CustomEvent('unselect', { bubbles: true });
this.el.nativeElement.dispatchEvent(domEvent);
}
}
Here is an example in action.
Hopefully that helps!
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
add a comment |
You can use HostListener to listen for this custom event. The following example triggers the custom event from a child component with the parent component listening for the event. You can even use args (second argument) such as ['$event.target'] to determine what element triggered the event.
This uses ngAfterViewInit() lifecycle hook, but it's just for demonstration and just to ensure the element ref is ready.
Parent:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@HostListener('unselect', ['$event.target'])
onUnSelect(el) {
console.log(el); // element that triggered event, in this case HTMLUnknownElement
console.log('unselect triggered');
}
}
Child:
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const domEvent = new CustomEvent('unselect', { bubbles: true });
this.el.nativeElement.dispatchEvent(domEvent);
}
}
Here is an example in action.
Hopefully that helps!
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
You can use HostListener to listen for this custom event. The following example triggers the custom event from a child component with the parent component listening for the event. You can even use args (second argument) such as ['$event.target'] to determine what element triggered the event.
This uses ngAfterViewInit() lifecycle hook, but it's just for demonstration and just to ensure the element ref is ready.
Parent:
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
@HostListener('unselect', ['$event.target'])
onUnSelect(el) {
console.log(el); // element that triggered event, in this case HTMLUnknownElement
console.log('unselect triggered');
}
}
Child:
import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'hello',
template: `<h1>Hello {{name}}!</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
@Input() name: string;
constructor(private el: ElementRef) {}
ngAfterViewInit() {
const domEvent = new CustomEvent('unselect', { bubbles: true });
this.el.nativeElement.dispatchEvent(domEvent);
}
}
Here is an example in action.
Hopefully that helps!
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
edited Nov 20 '18 at 16:28
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
answered Nov 20 '18 at 16:23
Alexander StaroselskyAlexander Staroselsky
12.2k42040
12.2k42040
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397035%2flisten-to-custom-dom-events-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
did the answer and working example help you resolve the issue?
– Alexander Staroselsky
Nov 26 '18 at 18:33