Best Practices for Passing Callback Functions in Angular: Using @Output Instead of @Input

Introduction

In AngularJS, developers often used the & parameter in directives to pass callback functions, allowing child components to communicate with parent components. However, in Angular, the approach has evolved to promote a more declarative and type-safe architecture. This article explores the recommended method for handling callbacks in Angular components, primarily using the @Output decorator and EventEmitter, as opposed to directly passing functions via @Input.

Recommended Approach: Using @Output and EventEmitter

The accepted best practice in Angular is to utilize @Output properties with EventEmitter for child-to-parent communication. This method aligns with Angular's reactive and observable-based patterns, ensuring better integration with change detection and type safety.

Consider a scenario where a child component, such as a suggestion menu, needs to notify the parent component when a suggestion is clicked. Instead of passing a callback function as an @Input, we define an @Output event in the child component.

@Component({
  selector: 'suggestion-menu',
  template: `
    <div (mousedown)="suggestionWasClicked(suggestion)">
      <!-- Suggestion content -->
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.Default
})
export class SuggestionMenuComponent {
  @Output() onSuggest: EventEmitter<any> = new EventEmitter();

  suggestionWasClicked(clickedEntry: SomeModel): void {
    this.onSuggest.emit([clickedEntry, this.query]);
  }
}

In the parent component, we bind to this event using Angular's event binding syntax.

<suggestion-menu (onSuggest)="insertSuggestion($event[0], $event[1])"></suggestion-menu>

This approach eliminates issues with this context binding and provides a clear, declarative way to handle events. The EventEmitter emits values that can be easily consumed in the parent, leveraging TypeScript's type system for better error checking.

Why Avoid Passing Callbacks via @Input

Although it is technically possible to pass a function as an @Input, as shown in some outdated examples, this method is discouraged. It can lead to problems with change detection and this binding, requiring manual intervention such as using bind() to scope the function correctly. Moreover, it bypasses Angular's built-in mechanisms for component interaction, potentially causing performance and maintenance issues.

For instance, in older approaches, one might bind a callback in the parent and pass it down, but this introduces complexity and is less intuitive than the event-based model.

Conclusion

In summary, Angular favors the use of @Output and EventEmitter for callback-like functionality, moving away from the AngularJS style of direct function passing. This not only enhances code clarity and type safety but also integrates seamlessly with Angular's overall architecture. Developers should adopt this pattern to build more robust and maintainable applications.