Harangue Harangue - 4 months ago 20
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

<app>
component, hence why I didn't list it.

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

@Component({
selector: 'app',
template: '<div (click)=foo()></div>'
})
export class App {
rootClickEmitter = new EventEmitter();
foo () {
this.rootClickEmitter.emit('bar');
}
}


How can I have the child component receive the
rootClickEmitter
event?

Answer

For "click outside", try this:

@Component({
  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');
    ev.stopPropagation();
  }
}

Plunker

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