EventListener

This decorator is meant for methods of a component. It can also be used in combination with the Debounce Decorator.

Using this decorator, event listeners can quickly and easily be attached on elements of the component.

The first paramter of the decorator is an optional indication for which event the listener should be defined. If this parameter is left blank, the name of the method is used as the event name.

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

	@EventListener()//attaches a click listener with the following functionality
	public click() {}

	@EventListener('click')//also attaches a click listener with the following functionality
	public someMethodName() {}
}

You can also use multiple event names separated by spaces like this:

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

	@EventListener('click change submit')//attaches a click, change and submit listener with the following functionality
	public someMethodName() {}
}

The element (s) on which the event listener is set are determined as follows:

1. If the second parameter of the decorator is used, all elements for the respective selector in the this.children attribute are used.

@Component({
	selector: 'my-component',
	childrenSelectors: [
		'some-child'
	]
})
class MyComponent extends AbstractComponent {

	@EventListener('click', 'some-child')//attaches a click listener with the following functionality to a child
	public childClick() {}
}

<div my-component>
click on this text does not trigger the listener.
<button some-child>click on this button does trigger the listener</button>
</div>

2. If the second parameter is left blank, the this.element attribute is used. (see the first example)