Roadmap › Angular (2 → 21) › Module: Signals, Change Detection and State
Lessons in this course (16)
11. Component communication and content projection
IntermediateMediumLesson 11 of 16
| Pattern | How |
|---|---|
| Parent → child | input() / @Input() |
| Child → parent | output() / @Output() + EventEmitter |
| Two-way | model() / [(x)] |
| Parent accesses child | viewChild() / @ViewChild() |
| Siblings / unrelated | Shared service with signals or BehaviorSubject |
| Global | State management store (NgRx, Signal Store) |
| Router | Route params, query params, withComponentInputBinding() |
html
<!-- card.component.html: content projection -->
<div class="card">
<header><ng-content select="[card-title]" /></header>
<ng-content />
</div>
<!-- usage -->
<app-card><h3 card-title>Orders</h3><p>Body</p></app-card>ng-template (not rendered until used), ng-container (grouping without an extra element), ngTemplateOutlet (render a template dynamically).