A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
Every Angular application has state. A user is logged in. A shopping cart has items. A form has been partially filled. A theme is set to dark. Some state is local to a single component, and signal() or a component property is the right home for it. But state that is shared across components —…
The previous chapter covered state management with services and signals. For many applications, that is sufficient. A service with a private signal, a readonly view, and mutation methods handles shared state cleanly. But as applications grow — multiple teams, complex workflows, undo/redo, time-travel debugging, state that must be persisted and rehydrated — the service pattern…
The previous chapter introduced NgRx and covered the core building blocks: store, actions, reducers, and selectors. Effects were introduced briefly — enough to show how HTTP calls are wired into the store. This chapter goes deeper. Effects are where NgRx handles everything that a reducer cannot: asynchronous operations, retries, cancellation, race conditions, and coordination between…
The previous chapters covered the global store with actions, reducers, effects, and selectors, and then went deeper with effects and entity. The global store is designed for application-wide state — the kind that outlives any single component and is shared across features. But not all state belongs in the global store. A component that opens…
The previous chapters covered the global NgRx store with actions, reducers, and effects, and then ComponentStore as the component-scoped alternative. Signal Store (@ngrx/signals) is the newest entry in the NgRx ecosystem, and it is the one NgRx now recommends for new projects. It combines the structure and composability of NgRx with the reactivity of Angular…
Internationalization is the process of designing an application so that it can be adapted to various languages and regions without engineering changes. Angular provides built-in internationalization tools, commonly abbreviated as i18n, to help you achieve this. The framework’s approach is primarily compile-time: translations are extracted from your source code, translated, and then merged back into…
The previous chapter covered the fundamentals of Angular’s internationalization pipeline: marking text with the i18n attribute, extracting translations, and building localized variants. This chapter goes deeper. It covers the $localize function for translating strings in TypeScript code, the ICU expression system for plurals and selections, the TRANSLATIONS token for runtime translation loading, the distinction between…
Accessibility is not a feature you add at the end. It is a property of how a component is built. An accessible Angular application works with screen readers, keyboard navigation, and assistive technologies without requiring a separate version or a special mode. The framework provides the tools — the @angular/cdk/a11y package, attribute binding for ARIA,…
Angular Material is the official UI component library for Angular, built and maintained by the Angular team. It implements Google’s Material Design specification, providing a set of high-quality, accessible, and customizable components that integrate deeply with the framework. Unlike third-party libraries that layer on top of Angular, Angular Material is designed alongside it — the…
Angular Material’s theming system was completely rewritten in version 19. The old approach — defining palettes, composing them into a theme map, and passing that map to component mixins — was replaced with a design token system based on Material Design 3 (M3) . The new API generates CSS variables from a single theme configuration…