Angular: Standalone Components, Signals & DI

Q: What are signals in Angular?

Signals are Angular's fine-grained reactivity primitive: a signal() holds a value, reading it tracks dependencies, and setting it updates only what depends on it. They simplify state and improve change-detection performance.

Q: What are standalone components?

Components that declare their own dependencies via imports instead of being registered in an NgModule. They're the modern default, removing most NgModule boilerplate and simplifying lazy loading.

Angular

Angular is an opinionated, batteries-included TypeScript framework for building large web applications. Where React hands you a library and a thousand choices, Angular gives you a complete, consistent architecture — dependency injection, routing, forms, HTTP, and testing all included.

That structure is the point: it keeps big, multi-team codebases consistent and maintainable over years. Modern Angular (standalone components and signals) has also shed much of its old boilerplate, narrowing the gap with lighter frameworks.

TL;DR

Angular shines for large, long-lived apps with multiple teams.
TypeScript is first-class and effectively required.
Modern Angular uses standalone components and signals (no more NgModules boilerplate).
RxJS still powers async streams — learn it well, and manage subscriptions.

Quick Example

A standalone component using a signal for reactive state (modern Angular):

Core Concepts

Components — UI building blocks with a template, logic, and styles; now standalone (no NgModules).
Templates — HTML with Angular syntax and the new control flow (@if, @for).
Signals — fine-grained reactive state, Angular's modern reactivity primitive.
Dependency injection — a built-in DI container for services and shared logic.
Routing & forms — first-party router and both reactive and template-driven forms.

Best Practices

Keep components small and focused; push logic into services.
Use signals for component state and lazy-loaded routes for performance.
Be deliberate with RxJS — name streams clearly and always unsubscribe (or use takeUntilDestroyed/async pipe).
Don't over-engineer state in small apps; reach for the framework's structure when it earns its keep.

Comparison: Angular vs React

See React for the other side.

Common Mistakes

Leaking RxJS subscriptions

Over-engineering small apps

FAQ

Angular or React?

Angular for large, long-lived apps where an enforced architecture keeps multiple teams consistent. React for flexibility, a larger talent pool, and gradual adoption. Angular includes far more out of the box; React lets you assemble your own stack.

Do I still need to learn RxJS?

Less than before — signals now cover most component reactivity — but RxJS remains central to HTTP, complex async flows, and much of the ecosystem. Learn enough to use it safely and to avoid subscription leaks.

What are signals in Angular?

Signals are Angular's fine-grained reactivity primitive: a signal() holds a value, reading it tracks dependencies, and setting it updates only what depends on it. They simplify state and improve change-detection performance.

What are standalone components?

Components that declare their own dependencies via imports instead of being registered in an NgModule. They're the modern default, removing most NgModule boilerplate and simplifying lazy loading.