A complete modern Angular guide, from the CLI and components to signals, standalone APIs, SSR, state management, performance, testing, and production architecture.
In the Angular chapters you have read so far, every binding you wrote lived inside a template — on an element the component itself rendered. But there is a category of bindings that target something outside the template entirely: the host element. That is the DOM element that matches the component’s selector. When you write…
In the previous chapters, you encountered directives repeatedly — *ngIf, *ngFor, [ngClass], [ngStyle], [ngModel]. They are the tools that shape the DOM, attach behavior to elements, and make templates dynamic. But until now, every directive you used was one Angular shipped. This chapter is about writing your own. Custom directives are the extension mechanism of…
A pipe is a special operator in Angular template expressions that allows you to transform data declaratively. The vertical bar character (|) is the pipe operator, inspired by the Unix pipe, and it takes a value on the left and passes it through a transformation function on the right . Angular ships with built-in pipes…
In the previous chapters, every component you rendered was loaded and initialized as part of the main bundle. Whether the user scrolled to it, clicked it, or never saw it at all, the JavaScript for that component was downloaded, parsed, and executed. @defer changes that contract. It is a declarative block that tells Angular: do…
Every Angular application you have written so far has been a client-side application. The browser downloads a minimal HTML shell, loads the JavaScript bundle, executes Angular, renders the component tree, fetches data, and finally paints content on the screen. The user stares at a blank page until that entire chain completes. Server-side rendering changes the…
In the previous chapter, you set up Angular Universal and sent your first server-rendered page to the browser. The server produced HTML, the browser painted it immediately, and the user saw content before the JavaScript bundle finished downloading. That is the promise of SSR. But there is a second act that determines whether the promise…
In the previous chapters, you set up Angular Universal for server-side rendering and learned how hydration makes the server-rendered HTML interactive. But SSR is not the only way to deliver pre-rendered HTML. When your content is the same for every user — marketing pages, blog posts, documentation, product catalogs with stable data — rendering on…
The Angular Router is one of the framework’s most used features and one of its least understood. You configure routes, navigate with routerLink, and read parameters from ActivatedRoute. That is the API surface most developers interact with. But underneath, the router is a state machine that runs through a specific sequence of events for every…
The previous chapter covered the router’s event stream and the guards that gate navigation. Those are the mechanisms you use every day. But the Angular Router has a deeper set of features that solve specific, less common problems: standalone route components that lazy-load without loadChildren, route-level providers that scope services to a feature, component input…
In the previous chapters, you learned the router’s event stream, the navigation lifecycle, and the guard types that gate navigation. This chapter puts those pieces together for the specific problem that almost every production application faces: authentication and authorization. How do you know who the user is, what they are allowed to see, and how…