**This book has accompanying online files for Angular 9, 10 and 11; all examples in the book work without changes in Angular 10 or 11.** Welcome to this one-stop-shop for learning Angular. __Pro Angular__ is the most concise and comprehensive guide available, giving you the knowledge you need to take full advantage of this popular framework for building your own dynamic JavaScript applications. The fourth edition of this full-color guide explains how to get the most from Angular, starting with an in-depth overview of the MVC pattern and presenting the range of benefits it can offer. From there, you will begin learning how to use Angular in your projects, starting with the nuts-and-bolts concepts, and progressing on to more advanced and sophisticated features. Each topic provides you with precisely enough learning and detail to be effective. In true Adam Freeman style, the most important features are given full court press treatment, while also addressing common problems and how to avoid them. **What You Will Learn:*** Get access to accompanying online files for Angular 9, 10 and 11; book examples work without changes in Angular 10 or 11 * Gain a solid architectural understanding of the MVC Pattern * Create rich and dynamic web app clients using Angular * Use the ng tools to create and build an Angular project * Extend and customize Angular * Acquire skills to unit test your Angular projects **Who This Book Is For:**This book is for web developers who want to create rich client-side applications. Foundational knowledge of HTML and JavaScript is recommended. __"Adam's books provide a finely tuned blend of architectural overview, technical depth, and experience-born wisdom. His clear, concise writing style, coupled with project driven real world examples, make me comfortable recommending his books to a broad audience, ranging from developers working with a technology for the first time to seasoned professionals who need to learn a new skill quickly."__ **Keith Dublin, Solution Principal, Slalom Consulting** __“Adam’s books are the print version of a chat bot. His investment in learning how developers learn pays off in dividends, making this one of the most comprehensive resources available. Novices and experienced professionals alike will gain knowledge from the accessible and insightful material.”__**Mark Donile, Software Engineer, MS CS** Table of Contents About the Author About the Technical Reviewer Part I: Getting Started with Angular Chapter 1: Getting Ready What Do You Need to Know? What Is the Structure of This Book? Part 1: Getting Started with Angular Part 2: Angular in Detail Part 3: Advanced Angular Features What Doesn’t This Book Cover? What Software Do I Need for Angular Development? How Do I Set Up the Development Environment? What If I Have Problems Following the Examples? What If I Find an Error in the Book? Are There Lots of Examples? Where Can You Get the Example Code? How Do I Contact the Author? What If I Really Enjoyed This Book? What If This Book Has Made Me Angry and I Want to Complain? Summary Chapter 2: Your First Angular App Preparing the Development Environment Installing Node.js Installing the angular-cli Package Installing an Editor Installing a Browser Creating and Preparing the Project Creating the Project Starting the Development Tools Adding Angular Features to the Project Creating a Data Model Creating the To-Do List Class Displaying Data to the User Updating the Component Understanding the Imports Understanding the Decorator Understanding the Class Styling the HTML Elements Displaying the List of To-Do Items Creating a Two-Way Data Binding Filtering To-Do Items Adding To-Do Items Displaying Completed To-Do Items Summary Chapter 3: Putting Angular in Context Understanding Where Angular Excels Understanding Round-Trip and Single-Page Applications Comparing Angular to React and Vue.js Understanding the MVC Pattern Understanding Models Understanding Controllers/Components Understanding View Data Understanding Views/Templates Understanding RESTful Services Common Design Pitfalls Putting the Logic in the Wrong Place Adopting the Data Store Data Format Just Enough Knowledge to Cause Trouble Summary Chapter 4: An HTML and CSS Primer Preparing the Example Project Understanding HTML Understanding Void Elements Understanding Attributes Applying Attributes Without Values Quoting Literal Values in Attributes Understanding Element Content Understanding the Document Structure Understanding Bootstrap Applying Basic Bootstrap Classes Using Contextual Classes Using Margin and Padding Changing Element Sizes Using Bootstrap to Style Tables Using Bootstrap to Create Forms Using Bootstrap to Create Grids Creating Responsive Grids Creating a Simplified Grid Layout Summary Chapter 5: JavaScript and TypeScript: Part 1 Preparing the Example Project Understanding the Basic Workflow Using Statements Defining and Using Functions Defining Functions with Parameters Using Default and Rest Parameters Defining Functions That Return Results Using Functions As Arguments to Other Functions Using Arrow Functions Using Variables and Types Using Variable Closure Using the Primitive Types Working with Booleans Working with Strings Using Template Strings Working with Numbers Using JavaScript Operators Using Conditional Statements The Equality Operator vs. the Identity Operator Explicitly Converting Types Converting Numbers to Strings Converting Strings to Numbers Working with Arrays Using an Array Literal Reading and Modifying the Contents of an Array Enumerating the Contents of an Array Using the Spread Operator Using the Built-in Array Methods Summary Chapter 6: JavaScript and TypeScript: Part 2 Preparing the Example Project Working with Objects Using Object Literals Using Functions as Methods Defining Classes Defining Class Getter and Setter Properties Using Class Inheritance Working with JavaScript Modules Creating and Using Modules Renaming Imports Importing All of the Types in a Module Useful TypeScript Features Using Type Annotations Type Annotating Properties and Variables Specifying Multiple Types or Any Type Using Tuples Using Indexable Types Using Access Modifiers Summary Chapter 7: SportsStore: A Real Application Preparing the Project Installing the Additional NPM Packages Adding the CSS Style Sheets to the Application Preparing the RESTful Web Service Preparing the HTML File Creating the Folder Structure Running the Example Application Starting the RESTful Web Service Preparing the Angular Project Features Updating the Root Component Updating the Root Module Inspecting the Bootstrap File Starting the Data Model Creating the Model Classes Creating the Dummy Data Source Creating the Model Repository Creating the Feature Module Starting the Store Creating the Store Component and Template Creating the Store Feature Module Updating the Root Component and Root Module Adding Store Features the Product Details Displaying the Product Details Adding Category Selection Adding Product Pagination Creating a Custom Directive Summary Chapter 8: SportsStore: Orders and Checkout Preparing the Example Application Creating the Cart Creating the Cart Model Creating the Cart Summary Components Integrating the Cart into the Store Adding URL Routing Creating the Cart Detail and Checkout Components Creating and Applying the Routing Configuration Navigating Through the Application Guarding the Routes Completing the Cart Detail Feature Processing Orders Extending the Model Updating the Repository and Data Source Updating the Feature Module Collecting the Order Details Using the RESTful Web Service Applying the Data Source Summary Chapter 9: SportsStore: Administration Preparing the Example Application Creating the Module Configuring the URL Routing System Navigating to the Administration URL Implementing Authentication Understanding the Authentication System Extending the Data Source Creating the Authentication Service Enabling Authentication Extending the Data Source and Repositories Creating the Administration Feature Structure Creating the Placeholder Components Preparing the Common Content and the Feature Module Implementing the Product Feature Implementing the Product Editor Implementing the Orders Feature Summary Chapter 10: SportsStore: Progressive Features and Deployment Preparing the Example Application Adding Progressive Features Installing the PWA Package Caching the Data URLs Responding to Connectivity Changes Preparing the Application for Deployment Creating the Data File Creating the Server Changing the Web Service URL in the Repository Class Building and Testing the Application Testing the Progressive Features Containerizing the SportsStore Application Installing Docker Preparing the Application Creating the Docker Container Running the Application Summary Part II: Angular in Detail Chapter 11: Understanding Angular Projects and Tools Creating a New Angular Project Understanding the Project Structure Understanding the Source Code Folder Understanding the Packages Folder Using the Development Tools Understanding the Development HTTP Server Understanding the Build Process Understanding the Application Bundle Understanding the Polyfills Bundle Understanding the Styles Bundle Using the Linter Understanding How an Angular Application Works Understanding the HTML Document Understanding the Application Bootstrap Understanding the Root Angular Module Understanding the Angular Component Understanding Content Display Understanding the Production Build Process Understanding Ahead-of-Time Compilation Understanding Differential Loading Running the Production Build Starting Development in an Angular Project Creating the Data Model Creating the Descriptive Model Class Creating the Data Source Creating the Model Repository Creating a Component and Template Configuring the Root Angular Module Summary Chapter 12: Using Data Bindings Preparing for This Chapter Understanding One-Way Data Bindings Understanding the Binding Target Understanding Property Bindings Understanding the Expression Understanding the Brackets Understanding the Host Element Using the Standard Property and Attribute Bindings Using the Standard Property Binding Using the String Interpolation Binding Using the Attribute Binding Setting Classes and Styles Using the Class Bindings Setting All of an Element’s Classes with the Standard Binding Setting Individual Classes Using the Special Class Binding Setting Classes Using the ngClass Directive Using the Style Bindings Setting a Single Style Property Setting Styles Using the ngStyle Directive Updating the Data in the Application Summary Chapter 13: Using the Built-in Directives Preparing the Example Project Using the Built-in Directives Using the ngIf Directive Using the ngSwitch Directive Avoiding Literal Value Problems Using the ngFor Directive Using Other Template Variables Using the Index Value Using the Odd and Even Values Using the First and Last Values Minimizing Element Operations Using the ngTemplateOutlet Directive Providing Context Data Understanding One-Way Data Binding Restrictions Using Idempotent Expressions Understanding the Expression Context Summary Chapter 14: Using Events and Forms Preparing the Example Project Importing the Forms Module Preparing the Component and Template Using the Event Binding Using Event Data Using Template Reference Variables Using Two-Way Data Bindings Using the ngModel Directive Working with Forms Adding a Form to the Example Application Adding Form Data Validation Styling Elements Using Validation Classes Displaying Field-Level Validation Messages Using the Component to Display Validation Messages Validating the Entire Form Displaying Summary Validation Messages Disabling the Submit Button Using Model-Based Forms Enabling Model-Based Forms Feature Defining the Form Model Classes Using the Model for Validation Generating the Elements from the Model Creating Custom Form Validators Applying a Custom Validator Summary Chapter 15: Creating Attribute Directives Preparing the Example Project Creating a Simple Attribute Directive Applying a Custom Directive Accessing Application Data in a Directive Reading Host Element Attributes Using a Single Host Element Attribute Creating Data-Bound Input Properties Responding to Input Property Changes Creating Custom Events Binding to a Custom Event Creating Host Element Bindings Creating a Two-Way Binding on the Host Element Exporting a Directive for Use in a Template Variable Summary Chapter 16: Creating Structural Directives Preparing the Example Project Creating a Simple Structural Directive Implementing the Structural Directive Class Enabling the Structural Directive Using the Concise Structural Directive Syntax Creating Iterating Structural Directives Providing Additional Context Data Using the Concise Structure Syntax Dealing with Property-Level Data Changes Dealing with Collection-Level Data Changes Keeping Track of Views Querying the Host Element Content Querying Multiple Content Children Receiving Query Change Notifications Summary Chapter 17: Understanding Components Preparing the Example Project Structuring an Application with Components Creating New Components Understanding the New Application Structure Defining Templates Defining External Templates Using Data Bindings in Component Templates Using Input Properties to Coordinate Between Components Using Directives in a Child Component Template Using Output Properties to Coordinate Between Components Projecting Host Element Content Completing the Component Restructure Using Component Styles Defining External Component Styles Using Advanced Style Features Setting View Encapsulation Using the Shadow DOM CSS Selectors Selecting the Host Element Selecting the Host Element’s Ancestors Pushing a Style into the Child Component’s Template Querying Template Content Summary Chapter 18: Using and Creating Pipes Preparing the Example Project Understanding Pipes Creating a Custom Pipe Registering a Custom Pipe Applying a Custom Pipe Combining Pipes Creating Impure Pipes Using the Built-in Pipes Formatting Numbers Formatting Currency Values Formatting Percentages Formatting Dates Changing String Case Serializing Data as JSON Slicing Data Arrays Formatting Key/Value Pairs Selecting Values Pluralizing Values Summary Chapter 19: Using Services Preparing the Example Project Understanding the Object Distribution Problem Demonstrating the Problem Distributing Objects as Services Using Dependency Injection Preparing the Service Preparing the Dependent Components Registering the Service Reviewing the Dependency Injection Changes Declaring Dependencies in Other Building Blocks Declaring a Dependency in a Pipe Declaring Dependencies in Directives Understanding the Test Isolation Problem Isolating Components Using Services and Dependency Injection Preparing the Services Registering the Services Preparing the Dependent Component Completing the Adoption of Services Updating the Root Component and Template Updating the Child Components Summary Chapter 20: Using Service Providers Preparing the Example Project Using Service Providers Using the Class Provider Understanding the Token Using Opaque Tokens Understanding the useClass Property Resolving a Dependency with Multiple Objects Using the Value Provider Using the Factory Provider Using the Existing Service Provider Using Local Providers Understanding the Limitations of Single Service Objects Creating Local Providers in a Component Understanding the Provider Alternatives Creating a Local Provider for All Children Creating a Provider for View Children Controlling Dependency Resolution Restricting the Provider Search Skipping Self-Defined Providers Summary Chapter 21: Using and Creating Modules Preparing the Example Project Understanding the Root Module Understanding the imports Property Understanding the declarations Property Understanding the providers Property Understanding the bootstrap Property Creating Feature Modules Creating a Model Module Creating the Module Definition Updating the Other Classes in the Application Updating the Root Module Creating a Utility Feature Module Creating the Module Folder and Moving the Files Updating the Classes in the New Module Creating the Module Definition Understanding the Imports Understanding the Providers Understanding the Declarations Understanding the Exports Updating the Other Classes in the Application Updating the Root Module Creating a Feature Module with Components Creating the Module Folder and Moving the Files Creating the Module Definition Updating the Other Classes Updating the Root Module Summary Part III: Advanced Angular Features Chapter 22: Creating the Example Project Starting the Example Project Adding and Configuring the Bootstrap CSS Package Creating the Project Structure Creating the Model Module Creating the Product Data Type Creating the Data Source and Repository Completing the Model Module Creating the Core Module Creating the Shared State Service Creating the Table Component Creating the Table Component Template Creating the Form Component Creating the Form Component Template Creating the Form Component Styles Completing the Core Module Creating the Messages Module Creating the Message Model and Service Creating the Component and Template Completing the Message Module Completing the Project Summary Chapter 23: Using Reactive Extensions Preparing the Example Project Understanding the Problem Solving the Problem with Reactive Extensions Understanding Observables Understanding Observers Understanding Subjects Using the Async Pipe Using the Async Pipe with Custom Pipes Scaling Up Application Feature Modules Going Beyond the Basics Filtering Events Transforming Events Using Different Event Objects Receiving Only Distinct Events Using a Custom Equality Checker Taking and Skipping Events Summary Chapter 24: Making HTTP Requests Preparing the Example Project Configuring the Model Feature Module Creating the Data File Updating the Form Component Running the Example Project Understanding RESTful Web Services Replacing the Static Data Source Creating the New Data Source Service Setting Up the HTTP Request Processing the Response Configuring the Data Source Using the REST Data Source Saving and Deleting Data Consolidating HTTP Requests Making Cross-Origin Requests Using JSONP Requests Configuring Request Headers Handling Errors Generating User-Ready Messages Handling the Errors Summary Chapter 25: Routing and Navigation: Part 1 Preparing the Example Project Getting Started with Routing Creating a Routing Configuration Creating the Routing Component Updating the Root Module Completing the Configuration Adding Navigation Links Understanding the Effect of Routing Completing the Routing Implementation Handling Route Changes in Components Using Route Parameters Using Multiple Route Parameters Using Optional Route Parameters Navigating in Code Receiving Navigation Events Removing the Event Bindings and Supporting Code Summary Chapter 26: Routing and Navigation: Part 2 Preparing the Example Project Adding Components to the Project Using Wildcards and Redirections Using Wildcards in Routes Using Redirections in Routes Navigating Within a Component Responding to Ongoing Routing Changes Styling Links for Active Routes Fixing the All Button Creating Child Routes Creating the Child Route Outlet Accessing Parameters from Child Routes Summary Chapter 27: Routing and Navigation: Part 3 Preparing the Example Project Guarding Routes Delaying Navigation with a Resolver Creating a Resolver Service Registering the Resolver Service Applying the Resolver Displaying Placeholder Content Using a Resolver to Prevent URL Entry Problems Preventing Navigation with Guards Preventing Route Activation Consolidating Child Route Guards Preventing Route Deactivation Loading Feature Modules Dynamically Creating a Simple Feature Module Loading the Module Dynamically Creating a Route to Dynamically Load a Module Using a Dynamically Loaded Module Guarding Dynamic Modules Applying a Dynamic Loading Guard Targeting Named Outlets Creating Additional Outlet Elements Navigating When Using Multiple Outlets Summary Chapter 28: Using Animations Preparing the Example Project Disabling the HTTP Delay Simplifying the Table Template and Routing Configuration Getting Started with Angular Animation Enabling the Animation Module Creating the Animation Defining Style Groups Defining Element States Defining State Transitions Defining the Trigger Applying the Animation Testing the Animation Effect Understanding the Built-in Animation States Understanding Element Transitions Creating Transitions for the Built-in States Animating Element Addition and Removal Controlling Transition Animations Specifying a Timing Function Specifying an Initial Delay Using Additional Styles During Transition Performing Parallel Animations Understanding Animation Style Groups Defining Common Styles in Reusable Groups Using Element Transformations Applying CSS Framework Styles Summary Chapter 29: Angular Unit Testing Preparing the Example Project Running a Simple Unit Test Working with Jasmine Testing an Angular Component Working with the TestBed Class Configuring the Test Bed for Dependencies Testing Data Bindings Testing a Component with an External Template Testing Component Events Testing Output Properties Testing Input Properties Testing with Asynchronous Operations Testing an Angular Directive Summary Index This book has accompanying online files for Angular 9, 10 and 11; all examples in the book work without changes in Angular 10 or 11. Welcome to this one-stop-shop for learning Angular. Pro Angular is the most concise and comprehensive guide available, giving you the knowledge you need to take full advantage of this popular framework for building your own dynamic JavaScript applications. The fourth edition of this full-color guide explains how to get the most from Angular, starting with an in-depth overview of the MVC pattern and presenting the range of benefits it can offer. From there, you will begin learning how to use Angular in your projects, starting with the nuts-and-bolts concepts, and progressing on to more advanced and sophisticated features. Each topic provides you with precisely enough learning and detail to be effective. In true Adam Freeman style, the most important features are given full court press treatment, while also addressing common problems and how to avoid them. What You Will Learn: Get access to accompanying online files for Angular 9, 10 and 11; book examples work without changes in Angular 10 or 11 Gain a solid architectural understanding of the MVC Pattern Create rich and dynamic web app clients using Angular Use the ng tools to create and build an Angular project Extend and customize Angular Acquire skills to unit test your Angular projects Who This Book Is For: This book is for web developers who want to create rich client-side applications. Foundational knowledge of HTML and JavaScript is recommended. "Adam's books provide a finely tuned blend of architectural overview, technical depth, and experience-born wisdom. His clear, concise writing style, coupled with project driven real world examples, make me comfortable recommending his books to a broad audience, ranging from developers working with a technology for the first time to seasoned professionals who need to learn a new skill quickly." Keith Dublin, Solution Principal, Slalom Consulting "Adam's books are the print version of a chat bot. His investment in learning how developers learn pays off in dividends, making this one of the most comprehensive resources available. Novices and experienced professionals alike will gain knowledge from the accessible and insightful material." Mark Donile, Software Engineer, MS CS This book has accompanying online files for Angular 9 and 10; all examples in the book work without changes in Angular 10. Welcome to this one-stop-shop for learning Angular. Pro Angular is the most concise and comprehensive guide available, giving you the knowledge you need to take full advantage of this popular framework for building your own dynamic JavaScript applications. The fourth edition of this popular, full-color guide explains how to get the most from Angular, starting with an in-depth overview of the MVC pattern and presenting the range of benefits it can offer. From there, you will begin learning how to use Angular in your projects, starting with the nuts-and-bolts concepts, and progressing on to more advanced and sophisticated features. Each topic in this full-color book provides you with precisely enough learning and detail to be effective. In true Adam Freeman style, the most important features are given full court press treatment, while also addressing common problems and how to avoid them. What You Will Learn: Accompanying online files for Angular 9 and 10; book examples work without changes in Angular 10 Gain a solid architectural understanding of the MVC Pattern Create rich and dynamic web app clients using Angular Use the ng tools to create and build an Angular project Extend and customize Angular Acquire skills to unit test your Angular projects Who This Book Is For: This book is for web developers who want to create rich client-side applications. Foundational knowledge of HTML and JavaScript is recommended. "Adam's books provide a finely tuned blend of architectural overview, technical depth, and experience-born wisdom. His clear, concise writing style, coupled with project driven real world examples, make me comfortable recommending his books to a broad audience, ranging from developers working with a technology for the first time to seasoned professionals who need to learn a new skill quickly." Keith Dublin, Solution Principal, Slalom Consulting "Adam's books are the print version of a chat bot. His investment in learning how developers learn pays off in dividends, making this one of the most comprehensive resources available. Novices and experienced professionals alike will gain knowledge from the accessible and insightful material." Mark Donile, Software Engineer, MS CS Welcome to this one-stop-shop for learning Angular 9. Pro Angular 9 is the most concise and comprehensive guide available, giving you the knowledge you need to take full advantage of this popular framework for building their own dynamic JavaScript applications. The fourth edition of this popular guide explains how to get the most from Angular 9, starting with an in-depth overview of the MVC pattern, presenting the range of benefits it can offer. From there, you will begin learning how to use Angular in your projects, starting with the nuts-and-bolts concepts, and progressing on to more advanced and sophisticated features. Each topic in this full-color book provides you with precisely enough learning and detail to be effective. In true Adam Freeman style, the most important features are given full court press treatment, while also addressing common problems and how to avoid them. What You Will Learn: Gain a solid architectural understanding of the MVC Pattern Create rich and dynamic web app clients using Angular 9 Use the ng tools to create and build an Angular project Extend and customize Angular Acquire stills to unit test your Angular projects This book is for web developers who want to create rich client-side applications and possess a foundational knowledge of HTML and JavaScript About the Author: Adam Freeman is an experienced IT professional who has held senior positions in a range of companies, most recently serving as chief technology officer and chief operating officer of a global bank. Now retired, he spends his time writing and long-distance running. "Adam's books provide a finely tuned blend of architectural overview, technical depth, and experience-born wisdom. His clear, concise writing style, coupled with project driven real world examples, make me comfortable recommending his books to a broad audience, ranging from developers working with a technology for the first time to seasoned professionals who need to learn a new skill quickly." Keith Dublin, S olution Principal, Slalom Consulting The new edition of this concise and comprehensive guide is presented in full color and updated for Angular 9. Angular is the leading framework for building dynamic JavaScript applications that take advantage of the capabilities of modern browsers and devices. Angular, which is maintained by Google, introduces novel ways for working with powerful new features, and brings new flexibility to web application development, all underpinned by the same Model-View-Controller (MVC) pattern that make the original Angular so successful. Best-selling author Adam Freeman explains how to get the most from Angular 9. He begins by describing the MVC pattern and the benefits it can offer and then shows you how to use Angular in your projects, starting from the nuts-and-bolts and building up to the most advanced and sophisticated features, going in-depth to give you the knowledge you need. What You Will Learn: Gain a solid architectural understanding of the MVC Pattern Learn how to create rich and dynamic web app clients using Angular Learn how to use the ng tools to create and build an Angular project Learn how to extend and customize Angular Learn how to unit test your Angular projects Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective. The most important features are given a no-nonsense in-depth treatment and chapters include common problems and details of how to avoid them. Who This Book Is For:This book is for web developers with a foundation knowledge of HTML and JavaScript who want to create rich client-side applications