Mastering Component Communication in Angular

The post surveys the main ways Angular components communicate, comparing traditional decorators with newer signal-based APIs. It stays at the level of overview and points readers to code examples for each approach.

Reading notes

#

• Covers input and output patterns, including decorators, input() and output() functions, setters, inheritance, and ngOnChanges.
• Says input() and output() improve performance and change detection, and that model() unifies input and output for two-way binding.
• Presents services as a shared hub for component communication, especially when provided in root.
• Uses template variables for direct parent-child access in templates, with reduced boilerplate but tighter coupling.
• Describes injected components as a rare pattern where a child injects its parent to call parent methods.
• Compares @ViewChild and @ViewChildren with viewChild() and viewChildren() for accessing one or many elements in the view.
• Explains @ContentChild and @ContentChildren with <ng-content>, and their signal-based counterparts for projected content.
• Reviews routing parameters, query parameters, component input binding with withComponentInputBinding(), and router state objects as ways to pass data during navigation.