A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
A pipe transforms a value for display without changing the underlying data. You write {{ value | pipeName }} in a template, and Angular passes value through the pipe’s transform method, rendering the result. Pipes are how Angular handles formatting — dates, currency, percentages, case conversion, and more — without cluttering the component class with…
Built-in pipes cover the common cases — dates, numbers, currency, case. But every app has formatting needs the built-ins don’t handle: turning a status code into a label, truncating text with an ellipsis, highlighting a search term, converting bytes to KB/MB/GB, filtering a list, sorting an array, or mapping an enum value to something user-friendly….
Components don’t live in isolation. A parent renders a child, passes it data, and listens for events coming back. That’s component communication — the flow of information up and down the component tree. Angular’s two primitives for this are @Input (parent → child data) and @Output (child → parent events). Every UI you build in…
Angular 17.1 introduced signal-based inputs, outputs, and two-way bindings — the modern replacement for @Input, @Output, and the Change naming convention. The new APIs are input(), output(), and model(), and they integrate with Angular’s signal system. Inputs become signal reads instead of plain properties, outputs become plain emitters, and two-way bindings use model() — a…
Every Angular component has a lifecycle — a sequence of stages from creation to destruction. Angular calls lifecycle hooks at each stage: methods on the component class you can implement to run code at the right moment. Most components only need two of them — ngOnInit for setup and ngOnDestroy for cleanup — but the…
Chapter 15 covered the three hooks you use every day: constructor, ngOnInit, and ngOnDestroy. This chapter goes deeper. Angular has eight lifecycle hooks, and the remaining five — ngOnChanges, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked — handle the phases most components never need but some depend on entirely. They’re the hooks that fire when inputs change,…
Every component can have its own CSS. Angular scopes those styles to the component’s template so a .title rule in one component doesn’t affect .title elements in another. That scoping is called view encapsulation, and it’s the mechanism that lets you write component CSS without global naming conventions like BEM, without worrying about collisions, and…
NgModules are Angular’s original way to organize code — a class decorated with @NgModule that groups components, directives, pipes, and services into a cohesive block. For most of Angular’s history, every app had at least one module, and libraries shipped as modules. Since Angular 14, standalone components have offered an alternative: components that declare their…
A service is a class that holds shared logic — data access, business rules, state, communication with APIs. Dependency injection (DI) is how Angular gives components and other services access to those services without them creating instances manually. Instead of new UserService() inside every component, you declare a dependency and Angular provides an instance. That…
Chapter 19 covered the basics — what a service is, how to create one, how to inject it with inject() or constructor injection, and where providedIn: ‘root’ fits. This chapter goes deeper into the parts of dependency injection you don’t need every day but that matter when they come up: the parameter decorators that control…