List of Figures

Chapter 1. Introducing Angular

Figure 1.1. Splitting a prototype into components

Figure 1.2. Sample architecture of an Angular app

Figure 1.3. A newly generated Angular project

Figure 1.4. Building the bundles with ng serve

Figure 1.5. Running the app in the browser

Figure 1.6. Running the non-optimized app

Figure 1.7. Running the optimized app with AOT

Figure 1.8. Running the optimized app without AOT

Figure 1.9. The ngAuction workflows

Figure 1.10. The ngAuction home page with highlighted components

Figure 1.11. The online auction home page on smartphones

Figure 1.12. The redesigned ngAuction

Figure 1.13. The project structure for the online auction app

Chapter 2. The main artifacts of an Angular app

Figure 2.1. Running the two-module app

Figure 2.2. Event-binding syntax

Figure 2.3. Running a one-way binding app

Figure 2.4. Running a twoway binding sample app

Figure 2.5. Running the first version of ngAuction

Figure 2.6. Rendering the navbar

Figure 2.7. Collapsed navbar menu

Figure 2.8. Rendering the search component

Figure 2.9. Rendering the footer

Figure 2.10. Rendering ngAuction with the home component

Chapter 3. Router basics

Figure 3.1. Components on the home page of ngAuction

Figure 3.2. Allocating the area for changing views

Figure 3.3. Dissecting the URL

Figure 3.4. Home component rendered with red background

Figure 3.5. Product-detail component rendered with cyan background

Figure 3.6. The product-detail route received the product ID 1234.

Figure 3.7. Angular-compiled code in the browser

Figure 3.8. The product description route

Figure 3.9. The child route renders SellerInfo

Figure 3.10. The routes hierarchy

Figure 3.11. The URL of the seller component

Figure 3.12. The landing page of ngAuction with products

Figure 3.13. Six instances of ProductItemComponent

Figure 3.14. Splitting the <div> width using Bootstrap grid

Figure 3.15. The StarsComponent

Figure 3.16. Rendering product details

Chapter 4. Router advanced

Figure 4.1. A sample login workflow with a guard

Figure 4.2. Clicking the Product Detail link is guarded

Figure 4.3. Unsaved changes guard in action

Figure 4.4. The data is loaded.

Figure 4.5. Rendering a chat view with a secondary route

Figure 4.6. Luxury module is not loaded

Figure 4.7. Luxury module is loaded after the button click

Chapter 5. Dependency injection in Angular

Figure 5.1. DI in testing

Figure 5.2. A sample DI application

Figure 5.3. Injecting ProductService into ProductComponent

Figure 5.4. A dependency can have its own dependency.

Figure 5.5. Two components and two products

Figure 5.6. Two components and one service

Figure 5.7. Injecting dependencies with dependencies

Figure 5.8. An app module that uses feature modules

Figure 5.9. Navigating to the shipping module

Figure 5.10. ngAuction with Angular Material components

Figure 5.11. Sample Material Design palettes

Figure 5.12. A toolbar with a broken icon

Figure 5.13. A toolbar with a fixed icon

Figure 5.14. Pushing the button to the right

Figure 5.15. The toolbar menu

Figure 5.16. The search form with a misaligned button

Figure 5.17. The search form

Chapter 6. Reactive programming in Angular

Figure 6.1. Getting the price for AAPL

Figure 6.2. Getting weather without throttling

Figure 6.3. Getting weather with throttling

Figure 6.4. Rendering observable products

Figure 6.5. Rendering observable products

Figure 6.6. Implementing a master-detail scenario

Chapter 7. Laying out pages with Flex Layout

Figure 7.1. Two elements aligned in a row

Figure 7.2. The right element takes more space than the left one.

Figure 7.3. Column layout of the container element

Figure 7.4. Rendering on a medium device with a width of 960 pixels

Figure 7.5. Rendering on a small device with a width of 959 pixels

Figure 7.6. Rendering ngAuction on large screens

Figure 7.7. Rendering ngAuction on medium screens

Figure 7.8. Rendering ngAuction on small screens

Figure 7.9. The toolbar

Figure 7.10. Bundling ngAuction with ng serve

Figure 7.11. Running ngAuction

Chapter 8. Implementing component communications

Figure 8.1. A view consists of components.

Figure 8.2. The OrderProcessorComponent receives values.

Figure 8.3. Running the output properties example

Figure 8.4. A view consists of components.

Figure 8.5. Mediating communications

Figure 8.6. Running the mediator example

Figure 8.7. Injectable service as mediator

Figure 8.8. Searching for product aaa on eBay

Figure 8.9. Searching for product aaa on Amazon

Figure 8.10. The application’s workflows

Figure 8.11. Accessing the children API

Figure 8.12. Running the projection1 app with ViewEncapsulation.Native

Figure 8.13. Browser creating two #shadow-root nodes

Figure 8.14. Running the projection1 app with ViewEncapsulation.Emulated

Figure 8.15. Running the projection1 app with ViewEncapsulation.None

Figure 8.16. Running the projection2 app

Chapter 9. Change detection and component lifecycle

Figure 9.1. Change detection strategies

Figure 9.2. Excluding a branch from a CD cycle

Figure 9.3. Profiling change detection

Figure 9.4. A component’s lifecycle hooks

Figure 9.5. ngOnChanges() is invoked after the greeting change

Figure 9.6. ngDoCheck() is invoked after each pass of the change detector.

Figure 9.7. The product view

Chapter 10. Introducing the Forms API

Figure 10.1. Running a template-driven registration form

Figure 10.2. Form directives on the registration form

Figure 10.3. Running reactive registration form

Figure 10.4. Form with growable email controls

Chapter 11. Validating forms

Figure 11.1. Showing validation errors

Figure 11.2. Showing the validation error and changing the background color

Figure 11.3. Showing multiple validation errors

Figure 11.4. Comparing sync and async validators

Figure 11.5. The new search icon and product category tabs

Figure 11.6. The search-form component

Figure 11.7. The search results view

Figure 11.8. Showing two validation errors

Figure 11.9. The search icon in a toolbar

Chapter 12. Interacting with servers using HTTP

Figure 12.1. Rendering the content of products.json

Figure 12.2. Monitoring HTTP request and response

Figure 12.3. Monitoring the modified HTTP request

Figure 12.4. Server-side routing with Express

Figure 12.5. The server’s response to http://localhost:8000/api/products

Figure 12.6. The server’s response to http://localhost:8000/api/products/1

Figure 12.7. Two servers in dev mode

Figure 12.8. Two servers with a proxy

Figure 12.9. Retrieving all products from the Node server via proxy

Figure 12.10. Injecting into a service and a component

Figure 12.11. UI for adding new products

Figure 12.12. Reporting progress while reading a file

Chapter 13. Interacting with servers using the WebSocket protocol

Figure 13.1. Half-duplex communication

Figure 13.2. Full-duplex communication

Figure 13.3. Getting the message from the socket

Figure 13.4. Angular interacting with a server via a socket

Figure 13.5. Getting the message in Angular from Node

Figure 13.6. Send, disconnect, and send again

Figure 13.7. The ProductDetailComponent with a bid button

Figure 13.8. Client-server communications in ngAuction

Figure 13.9. ngAuction server structure

Figure 13.10. Synchronized bids in two browsers

Chapter 14. Testing Angular applications

Figure 14.1. Running tests using Jasmine’s test runner

Figure 14.2. A minimalistic test suite

Figure 14.3. The hello-jasmine project

Figure 14.4. Running ng test in the hello-jasmine project

Figure 14.5. Test coverage report for the hello-jasmine project

Figure 14.6. Properties of ComponentFixture

Figure 14.7. A successful run of ng test

Figure 14.8. Spec list with failures

Figure 14.9. Injecting a service into the test script

Figure 14.10. Steps in testing navigation

Figure 14.11. Angular CLI-generated E2E code

Figure 14.12. Angular CLI–generated E2E code

Figure 14.13. Running E2E tests for the login app

Figure 14.14. The form with search criteria

Figure 14.15. The test fails on timeout.

Figure 14.16. The search-result view

Figure 14.17. CSS selector for the price

Figure 14.18. The product-search test succeeded.

Chapter 15. Maintaining app state with ngrx

Figure 15.1. The Redux data flow

Figure 15.2. Running the counter app

Figure 15.3. EbayComponent compared to ChildComponent

Figure 15.4. ngrx data flow with effects

Figure 15.5. Effects in the data flow

Figure 15.6. The results of an aaa search on eBay

Figure 15.7. The store init action is selected.

Figure 15.8. The Action tab view

Figure 15.9. The State tab view

Figure 15.10. The Diff tab is selected.

Figure 15.11. The [Product] search-success action is skipped

Figure 15.12. The RouterStateSnapshot object in Redux DevTools

Figure 15.13. The state branches in the app and home modules

Figure 15.14. The combined state object of ngAuction

Figure 15.15. The ngAuction state in Redux DevTools

Figure 15.16. Loading products from all categories

Figure 15.17. The state after the LoadSuccess action

Appendix A. An overview of ECMAScript

Figure A.1. Callback hell or pyramid of doom

Appendix B. TypeScript essentials

Figure B.1. Transpiling TypeScript into ES5

Figure B.2. Transpiling a TypeScript class into a JavaScript closure

Figure B.3. Transpiling a TypeScript class with constructor

Figure B.4. Class inheritance in TypeScript

Figure B.5. The fragment of lib.d.ts describing the Array API

Appendix C. Using the npm package manager

Figure C.1. Angular dependencies in package.json

Figure C.2. Upgrading package versions with Yarn

Appendix D. RxJS essentials

Figure D.1. The data flow from observable to observers

Figure D.2. An operator: observable in, observable out

Figure D.3. The map operator

Figure D.4. The filter operator

Figure D.5. The reduce operator

Figure D.6. RxJS Subject

Figure D.7. The flatMap operator

Figure D.8. The switchMap operator