A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
For most of Angular’s history, dependencies came in through the constructor — constructor(private userService: UserService). It works, it’s explicit, and it’s still supported. But it has friction: subclasses must forward constructor parameters, factory functions can’t use it, and signal-based code doesn’t fit naturally. The inject() function, introduced in Angular 14, changes the model. Instead of…
A single-page application doesn’t have real pages — it swaps views without reloading. Routing is what makes that work. The Angular Router maps URLs to components, renders the matched component in a <router-outlet>, listens for navigation, and keeps the browser’s history in sync. It’s how /users shows the user list, /users/42 shows one user, and…
A route that always renders the same thing is limited. Real apps pass data through the URL — /users/42 shows user 42, /search?q=hello runs a search, /products?page=2&sort=price paginates and sorts. Angular’s router exposes that data through route parameters and query parameters. Route params are part of the path itself; query params come after the ?….
Real apps have hierarchies — a settings page with sub-pages, a dashboard with panels, a shop with categories and products. Flattening all of those into top-level routes would produce hundreds of entries and duplicate the shared layout. Nested routes solve this: child routes render inside a parent’s <router-outlet>, sharing the parent’s template, layout, and state….
Every byte the browser downloads costs time — parse time, network time, memory. A large Angular app can easily ship megabytes of JavaScript, and loading it all up front delays the first meaningful paint. Lazy loading splits the app into chunks that load on demand. The initial bundle contains only what’s needed to render the…
Routes aren’t always open. Some pages require login, some need a specific role, some should prompt before navigating away with unsaved changes. Route guards are the functions or classes that decide whether navigation proceeds. They run before the route activates (or deactivates), return true or false (or a UrlTree for a redirect), and can be…
A component that fetches its own data shows an empty state, then a loading spinner, then the content. That flicker — three states for what should be one — is the problem resolvers solve. A resolver runs before the route activates, fetches the data, and hands it to the component ready to use. By the…
For years, routed components had one way to read their data: inject ActivatedRoute and pull values from route.snapshot, route.data, route.paramMap. That works, but it couples every routed component to the router — you can’t test it without a mock, and you can’t reuse it outside a route. Angular 16 introduced component input binding: the router…
Angular has two form systems. Template-driven forms live in the template — directives like ngModel do the work, and the component barely knows a form exists. Reactive forms live in the class — you build a model out of FormControl, FormGroup, and FormArray objects, and the template just wires them up. Reactive forms are more…
FormGroup handles fixed shapes — the keys are known when you build the form. But real forms often have variable-length lists: multiple phone numbers, a set of tags, a list of line items, a stack of addresses. You don’t know how many at build time; the user adds and removes them. That’s what FormArray is…