liveBook · Manning

What you will learn in Pro Angular 16

by Adam Freeman

Chapter by chapter

Chapter 1: Getting ready

1.1 Understanding where Angular excels · 1.1.1 Understanding round-trip and single-page applications · 1.2 Comparing Angular to React · 1.3 What do you need to know? · 1.4 What is the structure of this book? · 1.4.1 Part 1: Getting started with Angular · 1.4.2 Part 2: Angular in detail · 1.4.3 Part 3: Advanced Angular features · 1.5 What doesn’t this book cover? · 1.6 What software do you need for Angular? · 1.7 How do you set up the development environment? · 1.8 What if you have problems following the examples? · 1.9 What if you find an error in the book? · 1.10 Are there lots of examples? · 1.11 Where can you get the example code? · 1.12 How do you contact the author? · 1.13 What if you really enjoyed this book? · 1.14 What if this book has made you angry? · 1.15 Summary

What you learn in chapter 1 →

Chapter 2: Jumping right in

2.1 Getting ready · 2.1.1 Installing Node.js · 2.1.2 Installing an editor · 2.1.3 Installing the Angular development package · 2.1.4 Choosing a browser · 2.2 Creating an Angular project · 2.2.1 Opening the project for editing · 2.2.2 Starting the Angular development tools · 2.3 Adding features to the application · 2.3.1 Creating a data model · 2.3.2 Displaying data to the user · 2.3.3 Updating the component · 2.4 Styling the application content · 2.4.1 Applying Angular Material components · 2.4.2 Defining the spacer CSS style · 2.5 Displaying the list of to-do items · 2.5.1 Defining additional styles · 2.6 Creating a two-way data binding · 2.7 Filtering completed to-do items · 2.8 Adding to-do items · 2.9 Finishing up · 2.10 Summary

What you learn in chapter 2 →

Chapter 3: Primer, part 1

3.1 Preparing the example project · 3.2 Understanding HTML · 3.2.1 Understanding void elements · 3.2.2 Understanding attributes · 3.2.3 Applying attributes without values · 3.2.4 Quoting literal values in attributes · 3.2.5 Understanding element content · 3.2.6 Understanding the document structure · 3.3 Understanding CSS and the Bootstrap framework · 3.4 Understanding TypeScript/JavaScript · 3.4.1 Understanding the TypeScript workflow · 3.4.2 Understanding JavaScript vs. TypeScript · 3.4.3 Understanding the basic TypeScript/JavaScript features · 3.4.4 Defining variables and constants · 3.4.5 Dealing with unassigned and null values · 3.4.6 Using the JavaScript primitive types · 3.4.7 Using the JavaScript operators · 3.5 Summary

What you learn in chapter 3 →

Chapter 4: Primer, part 2

4.1 Preparing for this chapter · 4.2 Defining and using functions · 4.2.1 Defining optional function parameters · 4.2.2 Defining default parameter values · 4.2.3 Defining rest parameters · 4.2.4 Defining functions that return results · 4.2.5 Using functions as arguments to other functions · 4.3 Working with arrays · 4.3.1 Reading and modifying the contents of an array · 4.3.2 Enumerating the contents of an array · 4.3.3 Using the spread operator · 4.3.4 Using the built-in array methods · 4.4 Working with objects · 4.4.1 Understanding literal object types · 4.4.2 Defining classes · 4.4.3 Checking object types · 4.5 Working with JavaScript modules · 4.5.1 Creating and using modules · 4.6 Summary

What you learn in chapter 4 →

Chapter 5: SportsStore: A real application

5.1 Preparing the project · 5.1.1 Installing the additional NPM packages · 5.1.2 Preparing the RESTful web service · 5.1.3 Preparing the HTML file · 5.1.4 Creating the folder structure · 5.1.5 Running the example application · 5.1.6 Starting the RESTful web service · 5.2 Preparing the Angular project features · 5.2.1 Updating the root component · 5.2.2 Inspecting the root module · 5.2.3 Inspecting the bootstrap file · 5.3 Starting the data model · 5.3.1 Creating the model classes · 5.3.2 Creating the dummy data source · 5.3.3 Creating the model repository · 5.3.4 Creating the feature module · 5.4 Starting the store · 5.4.1 Creating the store component and template · 5.4.2 Creating the store feature module · 5.4.3 Updating the root component and root module · 5.5 Adding store features · 5.5.1 Displaying the product details · 5.5.2 Adding category selection · 5.5.3 Adding product pagination · 5.5.4 Creating a custom directive · 5.6 Summary

What you learn in chapter 5 →

Chapter 6: SportsStore: orders and checkout

6.1 Preparing the example application · 6.2 Creating the cart · 6.2.1 Creating the cart model · 6.2.2 Creating the cart summary components · 6.2.3 Integrating the cart into the store · 6.3 Adding URL routing · 6.3.1 Creating the cart detail and checkout components · 6.3.2 Creating and applying the routing configuration · 6.3.3 Navigating through the application · 6.3.4 Guarding the routes · 6.4 Completing the cart detail feature · 6.5 Processing orders · 6.5.1 Extending the model · 6.5.2 Collecting the order details · 6.6 Using the RESTful web service · 6.6.1 Applying the data source · 6.7 Summary

What you learn in chapter 6 →

Chapter 7: SportsStore: administration

7.1 Preparing the example application · 7.1.1 Creating the module · 7.1.2 Configuring the URL routing system · 7.1.3 Navigating to the administration URL · 7.2 Implementing authentication · 7.2.1 Understanding the authentication system · 7.2.2 Extending the data source · 7.2.3 Creating the authentication service · 7.2.4 Enabling authentication · 7.3 Extending the data source and repositories · 7.4 Installing the component library · 7.5 Creating the administration feature structure · 7.5.1 Creating the placeholder components · 7.5.2 Preparing the common content and the feature module · 7.5.3 Implementing the product table feature · 7.5.4 Implementing the product editor · 7.5.5 Implementing the order table feature · 7.6 Summary

What you learn in chapter 7 →

Chapter 8: SportsStore: deployment

8.1 Preparing the example application · 8.2 Using pre-rendering · 8.2.1 Installing the SSR packages · 8.2.2 Creating the platform service · 8.2.3 Changing the web service URL · 8.2.4 Disabling elements · 8.2.5 Prerendering the application · 8.3 Adding progressive features · 8.3.1 Installing the PWA Package · 8.3.2 Caching the data URLs · 8.3.3 Responding to connectivity changes · 8.3.4 Testing the progressive features · 8.4 Preparing the application for deployment · 8.4.1 Creating the data file · 8.4.2 Creating the server · 8.4.3 Changing the web service URL in the repository class · 8.5 Building and testing the application · 8.6 Containerizing the SportsStore application · 8.6.1 Installing Docker · 8.6.2 Preparing the application · 8.6.3 Creating the Docker container · 8.6.4 Running the application · 8.7 Summary

What you learn in chapter 8 →

Chapter 9: Understanding Angular projects and tools

9.1 Creating a new Angular project · 9.2 Understanding the project structure · 9.2.1 Understanding the source code folder · 9.2.2 Understanding the packages folder · 9.3 Using the Angular development tools · 9.3.1 Understanding the development HTTP server · 9.3.2 Understanding the build process · 9.3.3 Using the linter · 9.4 Understanding how an Angular application works · 9.4.1 Understanding the HTML document · 9.4.2 Understanding the application bootstrap · 9.4.3 Understanding the root Angular module · 9.4.4 Understanding the Angular component · 9.4.5 Understanding content display · 9.5 Understanding the production build process · 9.5.1 Running the production build · 9.6 Starting development in an Angular project · 9.6.1 Creating the data model · 9.6.2 Creating a component and template · 9.6.3 Configuring the root Angular module · 9.7 Summary

What you learn in chapter 9 →

Chapter 10: Angular reactivity and signals

10.1 Preparing for this chapter · 10.2 Understanding Angular data flow · 10.2.1 Adding user interaction · 10.3 Understanding Angular change detection · 10.3.1 The advantage of Angular change detection · 10.3.2 The disadvantage of Angular change detection · 10.4 Understanding Angular Signals · 10.4.1 Using writeable signals · 10.4.2 Using computed signals · 10.4.3 Using effects · 10.4.4 Using signals outside of components · 10.5 Working with Reactive Extensions · 10.5.1 Understanding observables · 10.5.2 Using observables with signals · 10.6 Summary

What you learn in chapter 10 →

Chapter 11: Using Data Bindings

11.1 Preparing for this chapter · 11.2 Understanding one-way data bindings · 11.2.1 Understanding the binding target · 11.2.2 Understanding the expression · 11.2.3 Understanding the brackets · 11.2.4 Understanding the host element · 11.3 Using the standard property and attribute bindings · 11.3.1 Using the standard property binding · 11.3.2 Using the string interpolation binding · 11.3.3 Using the attribute binding · 11.4 Setting classes and styles · 11.4.1 Using the class bindings · 11.4.2 Using the style bindings · 11.5 Summary

What you learn in chapter 11 →

Chapter 12: Using the built-in directives

12.1 Preparing the example project · 12.2 Using the built-in directives · 12.2.1 Using the ngIf directive · 12.2.2 Using the ngSwitch directive · 12.2.3 Using the ngFor directive · 12.2.4 Using the ngTemplateOutlet directive · 12.2.5 Using directives without an HTML element · 12.3 Understanding one-way data binding restrictions · 12.3.1 Using idempotent expressions · 12.3.2 Understanding the expression context · 12.4 Summary

What you learn in chapter 12 →

Chapter 13: Using events and forms

13.1 Preparing the example project · 13.2 Using the event binding · 13.2.1 Using event data · 13.2.2 Handling events in the component · 13.2.3 Using template reference variables · 13.3 Using two-way data bindings · 13.3.1 Using the ngModel directive · 13.4 Working with forms · 13.4.1 Adding a form to the example application · 13.4.2 Adding form data validation · 13.4.3 Validating the entire form · 13.4.4 Completing the form · 13.5 Summary

What you learn in chapter 13 →

Chapter 14: Creating attribute directives

14.1 Preparing the example project · 14.2 Creating a simple attribute directive · 14.2.1 Applying a custom directive · 14.3 Accessing application data in a directive · 14.3.1 Reading host element attributes · 14.3.2 Creating data-bound input properties · 14.3.3 Responding to input property changes · 14.3.4 Requiring input property values · 14.4 Creating custom events · 14.4.1 Binding to a custom event · 14.5 Creating host element bindings · 14.6 Creating a two-way binding on the host element · 14.7 Exporting a directive for use in a template variable · 14.8 Summary

What you learn in chapter 14 →

Chapter 15: Creating structural directives

15.1 Preparing the example project · 15.2 Creating a simple structural directive · 15.2.1 Implementing the structural directive class · 15.2.2 Enabling the structural directive · 15.2.3 Using the concise structural directive syntax · 15.3 Creating iterating structural directives · 15.3.1 Providing additional context data · 15.3.2 Using the concise structure syntax · 15.3.3 Dealing with property-level data changes · 15.3.4 Dealing with collection-level data changes · 15.4 Querying the host element content · 15.4.1 Querying multiple content children · 15.4.2 Receiving query change notifications · 15.5 Summary

What you learn in chapter 15 →

Chapter 16: Understanding components

16.1 Preparing the example project · 16.2 Structuring an application with components · 16.2.1 Creating new components · 16.2.2 Defining templates · 16.2.3 Completing the component restructure · 16.3 Using component styles · 16.3.1 Defining external component styles · 16.4 Querying template content · 16.5 Summary

What you learn in chapter 16 →

Chapter 17: Using and creating pipes

17.1 Preparing the example project · 17.2 Understanding pipes · 17.3 Creating a custom pipe · 17.3.1 Registering a custom pipe · 17.3.2 Applying a custom pipe · 17.3.3 Combining pipes · 17.3.4 Creating impure pipes · 17.4 Using the built-in pipes · 17.4.1 Formatting numbers · 17.4.2 Formatting currency values · 17.4.3 Formatting percentages · 17.4.4 Formatting dates · 17.4.5 Changing string case · 17.4.6 Serializing data as JSON · 17.4.7 Slicing data arrays · 17.4.8 Formatting key-value pairs · 17.4.9 Selecting values · 17.4.10 Pluralizing values · 17.4.11 Using the async pipe · 17.5 Summary

What you learn in chapter 17 →

Chapter 18: Using services

18.1 Preparing the example project · 18.2 Understanding the object distribution problem · 18.2.1 Demonstrating the problem · 18.2.2 Distributing objects as services using dependency injection · 18.2.3 Declaring dependencies in other building blocks · 18.3 Understanding the test isolation problem · 18.3.1 Isolating components using services and dependency injection · 18.4 Completing the adoption of services · 18.4.1 Updating the root component and template · 18.4.2 Updating the child components · 18.5 Summary

What you learn in chapter 18 →

Chapter 19: Using and creating modules

19.1 Preparing the example project · 19.2 Understanding the root module · 19.2.1 Understanding the imports property · 19.2.2 Understanding the declarations property · 19.2.3 Understanding the providers property · 19.2.4 Understanding the bootstrap property · 19.3 Creating feature modules · 19.3.1 Creating a model module · 19.3.2 Creating a utility feature module · 19.3.3 Creating a feature module with components · 19.4 Summary

What you learn in chapter 19 →

Chapter 20: Creating the example project

20.1 Starting the example project · 20.1.1 Adding and configuring the Bootstrap CSS package · 20.1.2 Creating the project structure · 20.2 Creating the model module · 20.2.1 Creating the product data type · 20.2.2 Creating the data source and repository · 20.2.3 Completing the model module · 20.3 Creating the messages module · 20.3.1 Creating the message model and service · 20.3.2 Creating the component and template · 20.3.3 Completing the message Module · 20.4 Creating the core module · 20.4.1 Creating the shared state service · 20.4.2 Creating the table component · 20.4.3 Creating the form component · 20.4.4 Completing the core module · 20.5 Completing the project · 20.6 Summary

What you learn in chapter 20 →

Chapter 21: Using the forms API, part 1

21.1 Preparing for this chapter · 21.2 Understanding the reactive forms API · 21.3 Rebuilding the form using the API · 21.3.1 Responding to form control changes · 21.3.2 Managing control state · 21.3.3 Managing control validation · 21.3.4 Adding additional controls · 21.4 Working with multiple form controls · 21.4.1 Using a form group with a form element · 21.4.2 Accessing the form group from the template · 21.4.3 Displaying validation messages with a form group · 21.5 Summary

What you learn in chapter 21 →

Chapter 22: Using the forms API, part 2

22.1 Preparing for this chapter · 22.2 Creating form components dynamically · 22.2.1 Using a form array · 22.2.2 Adding and removing form controls · 22.2.3 Validating dynamically created form controls · 22.2.4 Filtering the FormArray values · 22.3 Creating custom form validation · 22.3.1 Creating a directive for a custom validator · 22.3.2 Validating across multiple fields · 22.3.3 Performing validation asynchronously · 22.4 Summary

What you learn in chapter 22 →

Chapter 23: Making HTTP Requests

23.1 Preparing the example project · 23.1.1 Configuring the model feature module · 23.1.2 Creating the data file · 23.1.3 Running the example project · 23.2 Understanding RESTful web services · 23.3 Replacing the static data source · 23.3.1 Creating the new data source service · 23.3.2 Configuring the data source · 23.3.3 Using the REST data source · 23.3.4 Saving and deleting data · 23.4 Consolidating HTTP requests · 23.5 Making cross-origin requests · 23.6 Configuring request headers · 23.7 Handling errors · 23.7.1 Generating user-ready messages · 23.7.2 Handling the errors · 23.8 Summary

What you learn in chapter 23 →

Chapter 24: Routing and navigation: part 1

24.1 Preparing the example project · 24.2 Getting started with routing · 24.2.1 Creating a routing configuration · 24.2.2 Creating the routing component · 24.2.3 Updating the root module · 24.2.4 Completing the Configuration · 24.2.5 Adding navigation links · 24.2.6 Understanding the effect of routing · 24.3 Completing the routing implementation · 24.3.1 Handling route changes in components · 24.3.2 Using route parameters · 24.3.3 Navigating in code · 24.3.4 Receiving navigation events · 24.3.5 Removing the event bindings and supporting code · 24.4 Summary

What you learn in chapter 24 →

Chapter 25: Routing and navigation: part 2

25.1 Preparing the example project · 25.1.1 Adding components to the project · 25.2 Using wildcards and redirections · 25.2.1 Using wildcards in routes · 25.2.2 Using redirections in routes · 25.3 Navigating within a component · 25.3.1 Responding to ongoing routing changes · 25.3.2 Styling links for active routes · 25.3.3 Fixing the All button · 25.4 Creating child routes · 25.4.1 Creating the child route outlet · 25.4.2 Accessing parameters from child routes · 25.5 Summary

What you learn in chapter 25 →

Chapter 26: Routing and navigation: part 3

26.1 Preparing the example project · 26.2 Guarding routes · 26.2.1 Delaying navigation with a resolver · 26.2.2 Preventing navigation with guards · 26.3 Summary

What you learn in chapter 26 →

Chapter 27: Optimizing application delivery

27.1 Preparing the example project · 27.2 Understanding the delivery problem · 27.3 Loading feature modules dynamically · 27.3.1 Creating a simple feature module · 27.3.2 Loading the module dynamically · 27.3.3 Guarding dynamic modules · 27.4 Using server-side rendering · 27.4.1 Installing the server-side rendering packages · 27.4.2 Preparing the application · 27.4.3 Building and running the SSR application · 27.4.4 Enabling navigation · 27.4.5 Modifying the terms guard · 27.4.6 Dealing with direct navigation · 27.4.7 Testing rehydration · 27.5 Using prerendering · 27.5.1 Preparing the application · 27.5.2 Prerendering the application · 27.6 Summary

What you learn in chapter 27 →

Chapter 28: Working with component libraries

28.1 Preparing for this chapter · 28.1.1 Removing buttons · 28.1.2 Adjusting the HTML file · 28.1.3 Running the project · 28.2 Using the library components · 28.2.1 Using the Angular Material button directive · 28.2.2 Using the Angular Material table · 28.3 Matching the component library theme · 28.3.1 Creating the custom component · 28.3.2 Using the Angular Material theme · 28.3.3 Applying the ripple effect · 28.4 Summary

What you learn in chapter 28 →

Chapter 29: Angular unit testing

29.1 Preparing the example project · 29.2 Running a simple unit test · 29.3 Working with Jasmine · 29.4 Testing an Angular component · 29.4.1 Working with the TestBed class · 29.4.2 Testing data bindings · 29.4.3 Testing a component with an external template · 29.4.4 Testing component events · 29.4.5 Testing output properties · 29.4.6 Testing input properties · 29.5 Testing an Angular directive · 29.6 Summary

What you learn in chapter 29 →

Concepts explained in this book

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.