Angular ARIA

Stabilized in Angular 22, the @angular/aria package provides a set of directives and tools to implement WAI-ARIA patterns correctly and easily.

Key Features:

• Accessible State Management: Directives that automatically sync internal component state (like expanded or selected) with the appropriate ARIA attributes.
• Focus Management: Tools for managing tab order and focus traps within complex UI widgets like modals or dropdowns.
• Live Regions: Simplified API for managing aria-live updates for screen readers.
• Standardized Patterns: Pre-built implementations for common widgets (Accordions, Tabs, Menus) that follow accessibility best practices out of the box.

Angular Change Detection

Change detection is the process by which Angular synchronizes the state of the application with the user interface.

Key concepts:

• Zone.js: The legacy library that monkey-patches browser APIs. Modern Angular (v22+) is moving towards a Zoneless architecture by default.
• ChangeDetectionStrategy.OnPush: As of Angular 22, OnPush is the default for all new components, leveraging Signals for precise UI updates.
• Zoneless Angular: The standard approach in v22, removing the dependency on Zone.js for better performance and smaller bundles.
• Signal-based Reactivity: The core engine driving change detection in v22, allowing Angular to track exactly what needs to change without traversing the entire component tree.

Modern Control Flow

Angular 17 introduced a new built-in syntax for control flow that replaces structural directives like *ngIf, *ngFor, and *ngSwitch.

Key advantages:

• Performance: Significant improvements in execution speed, especially for large lists.
• Better Developer Experience: More intuitive syntax that is closer to JavaScript/TypeScript.
• Improved Type Checking: Better integration with the Angular compiler for stricter type safety.
• Zero Imports: Built directly into the compiler, so you don’t need to import CommonModule or individual directives in standalone components.
• Enhanced Features: Built-in support for empty list states (@empty) and mandatory tracking (track) for loops.

Deferrable Views

Deferrable views, introduced with the @defer block, allow developers to declaratively lazy-load parts of a template. This significantly improves initial load time by reducing the amount of JavaScript needed for the first paint.

Key Triggers:

• on idle: Load when the browser is idle (default).
• on viewport: Load when the content enters the viewport.
• on interaction: Load when the user interacts with a placeholder (e.g., click, focus).
• on hover: Load when the user hovers over a trigger area.
• on timer: Load after a specific duration.
• on immediate: Load immediately after the rest of the page has finished.

Additional Blocks:

• @placeholder: Shown before the deferred content is loaded.
• @loading: Shown while the dependencies are being fetched.
• @error: Shown if the loading process fails.

Angular Dependency Injection

Dependency Injection (DI) is a core design pattern in Angular. It allows classes to receive their dependencies from an external source rather than creating them internally.

Key concepts:

• Injectors: Responsible for creating and providing instances of dependencies.
• Providers: Define how a dependency should be created (e.g., providedIn: 'root').
• Tokens: Unique identifiers for dependencies.
• Hierarchical DI: Different levels of injectors (root, platform, component-level) allow for flexible scoping of services.

Functional Interceptors

Introduced in Angular 15, functional interceptors provide a more lightweight and composable way to handle HTTP requests and responses compared to the older class-based HttpInterceptor.

Benefits:

• Reduced Boilerplate: No need to create a class and implement an interface.
• Improved Tree-shaking: Functions are easier for bundlers to optimize than classes.
• Better Type Safety: Leverages standard TypeScript function signatures.
• Simple Configuration: Configured directly in provideHttpClient(withInterceptors([...])).

Selectorless Components

Introduced in Angular 22, selectorless components allow you to import and use components directly in templates via their class names, bypassing the need for a string-based selector.

Benefits:

• Refactoring Safety: Renaming a component class automatically updates all usages in IDEs.
• Improved Tooling: Better integration with TypeScript language services and AI assistants.
• Simpler Templates: Reduces the mental overhead of mapping class names to kebab-case selectors.
• Stricter Typing: Ensures that only valid, imported components are used in the template.

Signal-based Component APIs

Modern Angular (v17.2+) shifted component communication from decorators (@Input, @Output) to signal-based functions. These functions provide better type safety, cleaner code, and integrate natively with the framework’s fine-grained reactivity.

Key Functions:

• input() / input.required(): Replaces @Input. The property is a Signal, allowing for automatic dependency tracking in computed() and effect().
• output(): Replaces @Output. Provides a cleaner, type-safe way to emit events.
• model(): A special primitive for two-way data binding. It exposes a signal that can be both read and updated, simplifying parent-child synchronization.
• viewChild() / contentChild(): Signal-based versions of the old query decorators, returning signals that update automatically as the view changes.

Angular Signals

Signals are a reactive primitive that provides fine-grained reactivity in Angular. They allow Angular to track state changes more precisely, leading to better performance and a more intuitive developer experience.

Key features:

• Fine-grained updates: Only the parts of the UI that depend on a signal are updated when its value changes.
• Glitch-free: Prevents unnecessary re-computations and ensures data consistency.
• Computed Signals: Derive state from other signals with automatic dependency tracking.
• Effects: Run side-effecting code when signal values change.
• Signal Forms (v22 Stable): A lightweight, reactive form system built entirely on signals, offering better type safety and simpler validation than traditional Reactive Forms.

SSR & Hydration

Server-Side Rendering (SSR) is the process of rendering your Angular application on the server and sending the static HTML to the browser. Hydration is the process of making that static HTML interactive again on the client.

Key concepts:

• Angular Universal: The older branding for Angular SSR (now integrated into the core CLI).
• Client-side Hydration: Introduced in Angular 16/17, it allows Angular to reuse the existing DOM structures rendered by the server rather than destroying and recreating them.
• provideClientHydration(): The provider used to enable hydration in a standalone app.
• Partial Hydration: A future-looking concept where only parts of the page are hydrated as needed (currently an area of active development in the ecosystem).
• TransferState: A mechanism to share data from the server to the client to avoid duplicate HTTP requests during hydration.

Standalone Components

Standalone components provide a simplified way to build Angular applications by reducing the need for NgModules. They were introduced as the default way to build components in modern Angular versions.

Benefits:

• Reduced Boilerplate: No need to declare components in a module.
• Better Tree-shaking: Dependencies are easier to track at the component level.
• Simpler Learning Curve: Reduces the conceptual overhead of modules for new developers.