Angular - is it good practice using output event emitters directly in the template?

Question

Normally in Angular I am used to treating html events that lead to component output firing in the manner like in the example:

//component:

@Output()
imageHoverEnter = new EventEmitter<void>();

...

onImageHoverEnter() {
  this.imageHoverEnter.emit();
}

//template:

<div>
  <img src="..." (mouseenter)="onImageHoverEnter()">
</div>

The reason for having a separate method that protects the @Output being used has to do with my already old habit of separating controller and view logic and not having stuff leaking through. Which can help with automatic testing among others.

However I have seen various examples, including from Google's own documentation (Angular Material) which use @Output emitters directly in the template:

<div>
  <img src="..." (mouseenter)="imageHoverEnter.emit()">
</div>

Moreover if we're looking at @Input() fields they are being used directly in the template most of the time.

Now I am tempted of doing the exact same thing and ditching the "function that invokes a function" approach (in the cases where there are no other side effects obviously) and I see no reason not doing this, besides me not being used to look at a controller and find it emptier than usual and having to look in the template for certain logic parts.

Are there any big drawbacks to doing things like this?

Answer 1

It's a matter of design preference. Usually it's a better idea to call emit from the controller for several reasons.

1. it will be easier to read and understand the component logic when viewing the code. I hate when reading people's code and I keep on switching back and forth from template to controller. Don't put logic in the template.

2. it will be easier to add functionality to the code later on. It's very common that you realize latter that besides emitting an event, you want to perform some other operation. Whem having a separate function for each event handler, you won't need refactor the template later, but if you put the logic in the template, you'll need to change the template file as well.

3. it's good to be consistent. Since there are so many times where you need to put it in a separate function, I find it nice to stick to the convention and do it like that appwide.