Signal Inputs

Angular effect(): When NOT to Use It and Better Alternatives

November 01, 2024

Angular's effect() function is often misused, leading to performance issues, unnecessary side effects, and code that's harder to reason about. While effects seem like an easy solution for reacting to signal changes, most scenarios have better alternatives using computed signals, template bindings, or lifecycle hooks. This tutorial shows you when NOT to use effects, demonstrates common anti-patterns, and provides better solutions for each scenario. You'll learn to write more efficient, maintainable Angular code.

Angular Angular Components Angular Effects

Angular Signal Inputs: Replace @Input and ngOnChanges (v19+)

October 25, 2024

Enabling and disabling form controls based on input changes requires ngOnChanges() lifecycle hooks and manual state management when using traditional @Input decorators. Signal inputs eliminate this complexity by providing reactive values that automatically trigger updates, making form state management simpler and more declarative. This tutorial demonstrates how to migrate from @Input and ngOnChanges() to signal inputs, showing how reactive forms integrate seamlessly with Angular's signal system.

Angular Angular Components Angular Signals

Angular Signal Inputs & output(): The Modern @Input and @Output Replacement (v19+)

March 24, 2024

Angular's traditional @Input() and @Output() decorators have been core to component communication for over a decade, but with signals, there's now a more reactive, type-safe, and declarative alternative. In this tutorial, you'll learn how signal inputs and the output() function replace decorator-based inputs and event emitters in Angular v19+. We'll walk step-by-step through converting a classic input/output component to the modern signal-based approach and explain when, and when not, you should migrate.