GlobalEventListener

The GlobalEventListener decorator works in the same way as the EventListener Decorator, except that this decorator does not attach the event listener on the element of the component or child element but on the window.document. For this reason, this decorator has only one parameter, since no child selection is possible.

This is quite handy in combination with the EventHelper, which triggers global CustomEvents. This allows components to communicate with each other and trigger certain actions.

An example is the following using the key.escape CustomEvent:

@Component({
	selector: 'my-component'
})
class MyComponent extends AbstractComponent {

	@GlobalEventListener('key.escape')
	public someMethodName() {
		console.log('do something on key escape!');
	}
}

Like for the EventListener decorator it is possible to attach to multiple events at once:

@Component({
	selector: 'my-component'
})
class MyComponent extends AbstractComponent {

	@GlobalEventListener('key.escape key.custom')
	public someMethodName() {
		console.log('do something on key escape or some custom key event!');
	}
}