Overview
- 1Angular 18 (May 2024) delivers the most architecture-level changes since Ivy in version 9.
- 2Zoneless mode: apps run without Zone.js using Signals for fine-grained change detection.
- 3Built-in control flow (@if, @for, @switch) replaces structural directives with better performance.
- 4Deferrable Views (@defer) enable lazily rendered template sections based on triggers.
- 5Angular Material 3 (M3) components provide Google Material Design 3 visual style.
Key Features in 18
Zoneless Change Detection — no Zone.js, driven purely by Signals
Signals API (stable) — fine-grained reactive primitives: signal(), computed(), effect()
Built-in control flow — @if, @for, @switch in templates (replaces NgIf, NgFor)
Deferrable Views — @defer with @placeholder, @loading, @error blocks
Full Application Hydration — SSR + client hydration without full page re-render
Standalone Components stable — no NgModule boilerplate required
Angular Material 3 with Sass-based theming system
Use Cases
- →Large enterprise applications with strict architecture requirements
- →Teams requiring strong TypeScript enforcement and opinionated structure
- →Applications with complex forms (Reactive Forms)
- →Internal tools and admin dashboards at scale
What's New in Angular 18
- Zoneless Change Detection: `provideExperimentalZonelessChangeDetection()` in bootstrapApplication
- Signals: signal(), computed(), effect(), toSignal(), toObservable() all stable
- Built-in @if/@for/@switch control flow ships with block-level syntax and implicit variables
- @defer triggers: on viewport, on idle, on interaction, on hover, on timer, on immediate
- SSR: full application hydration replaces component-level; event replay on hydration
- Angular Material 3 with `mat.define-theme()` and M3 color tokens
- ng-content fallback content support for slot-based composition
Signals & Reactivity
- signal(value) creates a writable reactive primitive; .set() and .update() mutate it
- computed(() => expr) derives a read-only signal with automatic dependency tracking
- effect(() => sideEffect) runs a side-effect whenever its signal dependencies change
- input() and output() replace @Input() and @Output() decorators in Signal-based components
- model() is a two-way bindable signal (replaces ngModel in component APIs)
- LinkedSignal — creates a writable computed signal that resets when dependencies change
RxJS & Async Patterns
- RxJS 7.x: Observable, Subject, BehaviorSubject, combineLatest, switchMap, mergeMap
- HttpClient uses Observables — subscribe, pipe, takeUntil for lifecycle management
- toSignal() bridges RxJS to Signals for template binding without async pipe
- AsyncPipe subscribes/unsubscribes automatically in templates — prevents memory leaks
- Resolve guards and CanActivate use Observables or Promises for route protection
Dependency Injection & Modules
- Hierarchical DI: root, component, and directive-level injectors
- provideIn: "root" makes a service a singleton across the entire application
- Standalone components use `imports: []` in @Component — no NgModule needed
- inject() function enables DI outside constructor (useful in functions/computed)
- Environment Injector: `runInInjectionContext()` for dynamic service injection
Frequently Asked Questions
What is Zoneless Angular?
Zoneless Angular removes the Zone.js dependency and relies on Signals for change detection. This results in smaller bundle sizes, faster startup, and more predictable performance. Enable it with provideExperimentalZonelessChangeDetection() — it is a developer preview in Angular 18.
Should I use Signals or RxJS in Angular 18?
Both. Signals are ideal for local component state and derived values — they are simpler and integrate with the template renderer. RxJS excels for async event streams, HTTP requests, and complex multi-source data pipelines. toSignal() and toObservable() bridge the two systems.
Are NgModules still required in Angular 18?
No. Standalone Components (stable since Angular 17) eliminate the need for NgModules. You can bootstrap apps with bootstrapApplication() and import directives/pipes directly in component metadata. NgModules are still supported for large legacy codebases.