Component Communication, Lifecycle Hooks, Change Detection, and Performance Basics

Parent-Child Communication

Components often communicate through inputs and outputs. Parents pass data downward, while children emit events upward when user actions or internal state changes should be reported.

@Input() course!: Course;
@Output() selected = new EventEmitter<number>();

Lifecycle Hooks

• ngOnInit for initialization work
• ngOnChanges when input values change
• ngOnDestroy for cleanup

Students should use lifecycle hooks deliberately rather than placing all logic in constructors or scattering setup randomly.

Change Detection

Angular updates the view when data changes. Understanding change detection helps teams avoid unnecessary rerendering, expensive computations in templates, and surprising UI behavior. This topic becomes especially important in large dashboards and data-heavy screens.

Performance-Oriented Habits

Use track-by strategies for repeated lists, keep templates clean, avoid repeated heavy method calls from markup, and unsubscribe where appropriate. Strong performance usually comes from many good habits, not one magic trick.

Real Example

A catalog page with hundreds of items, filters, and sorting controls can become slow if every keystroke or interaction triggers too much recomputation. Communication patterns and change detection discipline directly influence perceived speed.