Harangue Harangue - 1 year ago 98
Javascript Question

Angular 2 child component receive ancestor event

I have an Angular component that depends on a click event that occurs on the root App component. The child is located in random places inside the

component, hence why I didn't list it.

template: '<div>Child!</div>'
export class Child {
constructor () {}

selector: 'app',
template: '<div (click)=foo()></div>'
export class App {
rootClickEmitter = new EventEmitter();
foo () {

How can I have the child component receive the

Answer Source

For "click outside", try this:

  selector: 'child',
  template: '<div (click)="childClick($event)">child content here</div>',
  host: { '(document:click)': 'docClick()' }
export class Child {
  docClick() {
    console.log('clicked outside');
  childClick(ev) {
    console.log('child click');


Update: Eric just posted the following in another answer:

"You can use listenGlobal that will give you access to document, body, etc.

renderer.listenGlobal('document', 'click', () => {
  console.log('Document clicked');