A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
Signals and RxJS are the two reactive models in modern Angular, and they are not competing. Signals are for synchronous state — a counter, a filter, a form value — and they are read with () and tracked automatically. RxJS is for asynchronous streams — HTTP, WebSockets, timers, route parameters — and the operators compose…
The basic signal API — signal, computed, effect — covers the common cases. The advanced patterns cover the cases where the state is more complex: state that derives from an input and resets when the input changes, state that is written asynchronously, state that depends on a resource, state that is stored in a service…
The Resource API is Angular’s answer to asynchronous data in a signal-based world. Before it, the standard pattern for fetching data was a combination of toObservable, switchMap, and toSignal — a pipeline that worked but required the developer to manage loading states, errors, cancellation, and reloads manually. The resource() function wraps an async operation and…
Angular’s dependency injection is the framework’s backbone. Every service, every component, every directive, and every pipe lives in an injector hierarchy, and the tokens, the providers, and the resolution rules determine what is created, when, and where. The basic usage — @Injectable({ providedIn: ‘root’ }), the constructor injection, the inject() function — is familiar. The…
In Angular 54, the injector hierarchy was covered: the EnvironmentInjector, the ElementInjector, and the resolution order that walks the tree. This chapter goes deeper into the two pieces that make the hierarchy work: the providers that tell the injector what to create, and the injection tokens that identify what to create. A provider is a…
Angular’s dependency injection is not a flat container. It is a tree of injectors, and the tree mirrors the application’s structure — the component tree, the route tree, the lazy-loaded module tree. When a component asks for a dependency, the injector at that component tries to satisfy the request; if it cannot, it delegates to…
In Angular 54 through 56, the DI’s foundation was covered: the injector hierarchy, the injection tokens, the providers, and the hierarchical resolution. This chapter is the practical companion — the recipes. A provider is the recipe that tells the injector what to create for a token. The four forms — useClass, useValue, useFactory, useExisting —…
The previous chapter covered the provider recipes — the four use* types, the multi-providers, the provideX functions. This chapter covers where the providers live and how long they live. A provider’s scope is the part of the application that resolves the token to that provider, and a provider’s lifecycle is when the instance is created…
Standalone components are Angular’s answer to the boilerplate that NgModules required for every application. Before them, every component had to be declared in an NgModule, every directive had to be exported from a shared module, and every lazy-loaded route needed its own module. The standalone flag flips the model: a component declares its own dependencies…
The previous chapter covered standalone components and the bootstrap without NgModules. This chapter covers the other two building blocks that the standalone model made first-class: the standalone directive and the standalone pipe. A directive adds behavior to an element, and a pipe transforms a value in the template. Both followed the same evolution as the…