List of Listings

Chapter 1. Introducing Angular

Listing 1.1. A module with one component

Listing 1.2. Structure of a sample component

Listing 1.3. Using the search component in the app component

Chapter 2. The main artifacts of an Angular app

Listing 2.1. product.component.ts

Listing 2.2. Iterating through products with *ngFor

Listing 2.3. A sample root module

Listing 2.4. Generating a project and a feature module

Listing 2.5. Generated feature module

Listing 2.6. Generated shipping component

Listing 2.7. Generated shipping module

Listing 2.8. Exporting a shipping component

Listing 2.9. Adding the shipping module to the root module

Listing 2.10. Adding a shipping component

Listing 2.11. Two events with handlers

Listing 2.12. Angular 5: Configuring two apps in .angular-cli.json

Listing 2.13. The AppComponent for the one-way binding sample

Listing 2.14. A two-way binding sample

Listing 2.15. Installing Bootstrap, jQuery, and Popper.js

Listing 2.16. Generating components for ngAuction

Listing 2.17. The AppComponent template

Listing 2.18. The navbar component template

Listing 2.19. The search component template

Listing 2.20. The footer component template

Listing 2.21. The carousel component template

Listing 2.22. carousel.component.css

Listing 2.23. The home component template

Listing 2.24. Configuring routes

Listing 2.25. Mapping an empty path to the home component

Chapter 3. Router basics

Listing 3.1. Using the hash location strategy

Listing 3.2. Adding support to a History-based API

Listing 3.3. A sample routes configuration

Listing 3.4. Letting the root module know about the routes

Listing 3.5. A separate module with route support

Listing 3.6. Creating a router module for a feature module

Listing 3.7. HomeComponent

Listing 3.8. ProductDetailComponent

Listing 3.9. Angular’s Route interface

Listing 3.10. app.routing.ts

Listing 3.11. app.component.ts

Listing 3.12. app.module.ts

Listing 3.13. Using navigate()

Listing 3.14. Routes configuration

Listing 3.15. app.component.ts

Listing 3.16. ProductDetailComponentParam

Listing 3.17. Injecting and accessing the Router object

Listing 3.18. Receiving query parameters

Listing 3.19. Configuring child routes

Listing 3.20. product.detail.component.ts

Listing 3.21. product.description.component.ts

Listing 3.22. seller.info.component.ts

Listing 3.23. product.service.ts

Listing 3.24. product-item.component.ts

Listing 3.25. product-item.component.html

Listing 3.26. home.component.ts

Listing 3.27. home.component.html

Listing 3.28. stars.component.ts

Listing 3.29. Rendering seven stars

Listing 3.30. Styles section of .angular-cli.json

Listing 3.31. stars.component.html

Listing 3.32. stars.component.css

Listing 3.33. Adding a <div> with the <nga-stars> component

Listing 3.34. product-item.component.css

Listing 3.35. app-routing.module.ts

Listing 3.36. Configuring a second route

Listing 3.37. product-detail.component.ts

Listing 3.38. product-detail.component.html

Listing 3.39. product-detail.component.css

Chapter 4. Router advanced

Listing 4.1. Configuring a route with a canActivate guard

Listing 4.2. login.guard.ts

Listing 4.3. Configure one of the routes with a guard

Listing 4.4. login.component.ts

Listing 4.5. Adding the guard to the module’s providers

Listing 4.6. The AppComponent’s template

Listing 4.7. The ProductDetailComponent with an input field

Listing 4.8. UnsavedChangesGuard implements CanDeactivate

Listing 4.9. Adding CanDeactivate and CanDeactivate guards to a route

Listing 4.10. Specifying providers for guards

Listing 4.11. Routes with the resolver

Listing 4.12. data.resolver.ts

Listing 4.13. app.component.ts

Listing 4.14. Configuring routes for two outlets

Listing 4.15. A template of a component that has two outlets

Listing 4.16. luxury.module.ts

Listing 4.17. luxury.component.ts

Listing 4.18. app.module.ts

Listing 4.19. The bundles built by ng serve

Listing 4.20. Adding a preloading strategy

Listing 4.21. A sample custom preloader class

Chapter 5. Dependency injection in Angular

Listing 5.1. ProductService injected into ProductComponent

Listing 5.2. app.component.ts

Listing 5.3. product.component.ts

Listing 5.4. product-service.ts

Listing 5.5. Injecting HttpClient into ProductService

Listing 5.6. Adding HttpClientModule

Listing 5.7. Using provideIn

Listing 5.8. Two products and two services

Listing 5.9. product.factory.ts

Listing 5.10. Specifying a factory function as a provider

Listing 5.11. Providers with useFactory and useValue

Listing 5.12. Using InjectionToken instead of a string token

Listing 5.13. luxury.service.ts

Listing 5.14. luxury.module.ts

Listing 5.15. luxury.component.tss

Listing 5.16. The root module

Listing 5.17. home.component.ts

Listing 5.18. shipping.module.ts

Listing 5.19. shipping.component.ts

Listing 5.20. Creating a toolbar with Angular Material

Listing 5.21. A feature module for AM UI components

Listing 5.22. Adding the AM feature module

Listing 5.23. Adding a link and an icon button to the toolbar

Listing 5.24. Declaring items for a pop-up menu

Listing 5.25. search.component.html

Listing 5.26. Adding support for the Forms API

Listing 5.27. A fragment of search.component.css

Listing 5.28. product-item.component.html

Listing 5.29. home.component.css

Chapter 6. Reactive programming in Angular

Listing 6.1. Handling the keyup event

Listing 6.2. fromevent/app.component.ts

Listing 6.3. formcontrol/app.component.ts

Listing 6.4. weather/app.component

Listing 6.5. asyncpipe/app.component.ts

Listing 6.6. asyncpipe-products/product.service.ts

Listing 6.7. asyncpipe-products/app.component.ts

Listing 6.8. A fragment from ActivatedRoute

Listing 6.9. master-detail/app.component.ts

Listing 6.10. master-detail/product.detail.component.ts

Chapter 7. Laying out pages with Flex Layout

Listing 7.1. Adding the FlexLayoutModule

Listing 7.2. flex-layout/app.component.ts

Listing 7.3. Adding the .sm suffix

Listing 7.4. observable-media/app.component.ts

Listing 7.5. Using the ObservableMedia.isActive() API

Listing 7.6. _theme.scss

Listing 7.7. styles.scss

Listing 7.8. app.module.ts

Listing 7.9. app.component.html

Listing 7.10. app.component.scss

Listing 7.11. A fragment from src/data/products.json

Listing 7.12. product.service.ts

Listing 7.13. home.module.ts

Listing 7.14. modified home.module.ts

Listing 7.15. home.component.ts

Listing 7.16. home.component.html

Listing 7.17. home.component.scss

Chapter 8. Implementing component communications

Listing 8.1. order.component.ts

Listing 8.2. input/app.component.ts

Listing 8.3. Adding the setter and getter

Listing 8.4. iprice.quote.ts

Listing 8.5. price.quoter.component.ts

Listing 8.6. app.component.ts

Listing 8.7. istock.ts

Listing 8.8. price.quoter.component.ts

Listing 8.9. app.component.ts

Listing 8.10. order.component.ts

Listing 8.11. app.component.ts

Listing 8.12. state.service.ts

Listing 8.13. search.component.ts

Listing 8.14. ebay.component.ts

Listing 8.15. child.component.ts

Listing 8.16. app.component.ts

Listing 8.17. child.component.ts

Listing 8.18. app.component.ts

Listing 8.19. child.component.ts

Listing 8.20. app.component.ts

Chapter 9. Change detection and component lifecycle

Listing 9.1. The Zone is on

Listing 9.2. Enabling Angular debug tools

Listing 9.3. Fetching data in ngOnInit()

Listing 9.4. app.component.ts

Listing 9.5. child.component.ts

Listing 9.6. child.component-docheck.ts

Listing 9.7. product.module.ts

Listing 9.8. app.routing.ts

Listing 9.9. product.module.ts

Listing 9.10. product.component.ts

Listing 9.11. product.component.html

Listing 9.12. product-detail.component.ts

Listing 9.13. product-detail.component.html

Listing 9.14. product.module.ts

Listing 9.15. product-suggestion.component.ts

Listing 9.16. product-suggestion.component.html

Listing 9.17. product.module.ts

Chapter 10. Introducing the Forms API

Listing 10.1. Preparing to use the template-driven Forms API

Listing 10.2. Binding NgForm to a template variable

Listing 10.3. Adding the NgModel directive to an HTML element

Listing 10.4. A form with a nested form

Listing 10.5. Angular-aware form

Listing 10.6. The username and ssn fields

Listing 10.7. The password fields

Listing 10.8. A component that uses the template-driven Forms API

Listing 10.9. Adding support for reactive forms

Listing 10.10. Creating a form model object

Listing 10.11. Adding validators to a form control

Listing 10.12. Creating a form model by instantiating a FormGroup

Listing 10.13. Adding a FormArray to a FormGroup

Listing 10.14. Binding FormGroup to an HTML form

Listing 10.15. Using formGroupName

Listing 10.16. Completed form template

Listing 10.17. FormControl

Listing 10.18. Creating a form model with the reactive API

Listing 10.19. HTML binding to the model

Listing 10.20. Using FormArray in the form model

Listing 10.21. Iterating through the FormArray in a template

Listing 10.22. Creating a form model

Listing 10.23. The data for populating the form

Listing 10.24. The data for updating the description

Listing 10.25. The AppComponent

Listing 10.26. Creating a formModel with FormBuilder

Chapter 11. Validating forms

Listing 11.1. The ValidatorFn interface

Listing 11.2. Attaching the required validator

Listing 11.3. Attaching two validators

Listing 11.4. Getting validators’ errors

Listing 11.5. Conditionally showing and hiding errors

Listing 11.6. Applying validators on blur using the reactive API

Listing 11.7. Applying validators on blur using template-driven API

Listing 11.8. The interface custom validators must conform to

Listing 11.9. A sample custom validator

Listing 11.10. Attaching custom validators to form controls

Listing 11.11. Adding the error description in a custom validator

Listing 11.12. Using the dirty flag

Listing 11.13. Adding styles to the input field

Listing 11.14. A sample validator for a FormGroup

Listing 11.15. A modified form model for a user registration form

Listing 11.16. The template and styles of the user registration component

Listing 11.17. Using the touched property

Listing 11.18. Dynamically changing validators

Listing 11.19. A service with an async validator

Listing 11.20. async-validator/app.component.ts

Listing 11.21. SsnValidatorDirective

Listing 11.22. search-form.component.html

Listing 11.23. search-form.component.ts

Listing 11.24. search-results.component.ts

Listing 11.25. search-results.component.html

Listing 11.26. A fragment of app.component.html

Listing 11.27. The modified configuration of the routes

Listing 11.28. categories.component.html

Listing 11.29. categories.component.ts

Chapter 12. Interacting with servers using HTTP

Listing 12.1. Making an HTTP GET request

Listing 12.2. Specifying string as a returned data type

Listing 12.3. The file data/products.json

Listing 12.4. A fragment from .angular-cli.json

Listing 12.5. app.component.ts

Listing 12.6. Adding HTTP headers and query parameters to the GET request

Listing 12.7. The server’s dependencies in package.json

Listing 12.8. tsconfig.json for the server

Listing 12.9. my-express-server.ts

Listing 12.10. rest-server.ts

Listing 12.11. Specifying the directory with static resources

Listing 12.12. rest-server-angular.ts

Listing 12.13. restclient/app.component.ts

Listing 12.14. proxy-conf.json

Listing 12.15. app.component.asyncpipe.ts

Listing 12.16. A fragment from ngAuction’s ProductService

Listing 12.17. A fragment from the ngAuction’s CategoriesComponent

Listing 12.18. A fragment from client/package.json

Listing 12.19. rest-server-angular-post.ts

Listing 12.20. app.component.ts

Listing 12.21. A simple interceptor

Listing 12.22. Modifying HTTPRequest

Listing 12.23. Emulating server errors

Listing 12.24. logging.service.ts

Listing 12.25. console.logging.service.ts

Listing 12.26. logging.interceptor.service.ts

Listing 12.27. app.component.ts

Listing 12.28. Making a GET request with events tracking

Listing 12.29. app.component.ts

Chapter 13. Interacting with servers using the WebSocket protocol

Listing 13.1. simple-websocket-server.ts

Listing 13.2. Reusing the same port for both servers

Listing 13.3. simple-websocket-client.html

Listing 13.4. observable.service.ts

Listing 13.5. observableservice/app.component.ts

Listing 13.6. Sending errors and completion events

Listing 13.7. wsservice/websocket.service.ts

Listing 13.8. wsservice/app.component.ts

Listing 13.9. server/two-way-websocket-server.ts

Listing 13.10. environment.ts

Listing 13.11. environment.prod.ts

Listing 13.12. main.ts

Listing 13.13. rest-auction.ts

Listing 13.14. db-auction.ts (partial listing)

Listing 13.15. BidMessage from ws-auction.ts

Listing 13.16. createBidServer() from ws-auction.ts

Listing 13.17. The structure of BidServer

Listing 13.18. The constructor

Listing 13.19. Handling the connection event

Listing 13.20. Handling the client messages

Listing 13.21. Handling closed connections

Listing 13.22. Handling WebSocket errors

Listing 13.23. Handling changed parameters from ActivatedRoute

Listing 13.24. Passing a selected product to ProductDetailComponent

Listing 13.25. product-detail.component.ts

Listing 13.26. The bid button in the template

Listing 13.27. bid.service.ts

Chapter 14. Testing Angular applications

Listing 14.1. A simple Jasmine test suite

Listing 14.2. counter.ts

Listing 14.3. counter.spec.ts

Listing 14.4. Refactored counter.spec.ts

Listing 14.5. The final version of counter.spec.ts

Listing 14.6. Installing Karma

Listing 14.7. Angular CLI-generated karma.conf.js file

Listing 14.8. Configuring the testing module for your app

Listing 14.9. app.component.spec.ts

Listing 14.10. A spec for the title update

Listing 14.11. product.service.spec.ts

Listing 14.12. Reading data/products.json in a service

Listing 14.13. product.service.spec.ts

Listing 14.14. A fragment from app.routing.ts

Listing 14.15. app.component.ts

Listing 14.16. app.component.spec.ts

Listing 14.17. A fragment from protractor.conf.js

Listing 14.18. The generated app.po.ts file

Listing 14.19. The generated app.e2e-spec.ts file

Listing 14.20. Route configurations

Listing 14.21. login.component.ts

Listing 14.22. home.po.ts

Listing 14.23. login.po.ts

Listing 14.24. login.e2e-spec.ts

Listing 14.25. Routes configuration from the home module

Listing 14.26. The Search button on the toolbar

Listing 14.27. The beginning of the SearchPage class

Listing 14.28. Entering the search criteria

Listing 14.29. Clicking the form’s Search button

Listing 14.30. Getting the price of the first product

Listing 14.31. search.po.ts

Listing 14.32. search.e2e-spec.ts

Chapter 15. Maintaining app state with ngrx

Listing 15.1. An action to buy IBM stock

Listing 15.2. A reducer signature

Listing 15.3. The counter app without ngrx

Listing 15.4. reducer.ts

Listing 15.5. app.module.ts

Listing 15.6. app.component.ts

Listing 15.7. child.component.ts

Listing 15.8. A fragment of a class with effects

Listing 15.9. The state of the mediator app

Listing 15.10. actions.ts

Listing 15.11. search.component.ts

Listing 15.12. reducers.ts

Listing 15.13. product.service.ts

Listing 15.14. effects.ts

Listing 15.15. selectors.ts

Listing 15.16. ebay.component.ts

Listing 15.17. app.module.ts

Listing 15.18. app.component.ts

Listing 15.19. Adding instrumentation with two configuration options

Listing 15.20. An app module fragment

Listing 15.21. serializer.ts

Listing 15.22. app.component.ts

Listing 15.23. A fragment of effects.ts

Listing 15.24. Navigating in effects

Listing 15.25. app.module.ts

Listing 15.26. A fragment from home.module.ts

Listing 15.27. home/store/actions/products.ts

Listing 15.28. Fragments from categories.component.ts

Listing 15.29. home/store/reducers/products.ts

Listing 15.30. home/store/reducers/index.ts

Listing 15.31. home/store/effects/products.ts

Listing 15.32. The products slice in the home module state

Listing 15.33. home/store/reducers/products.spec.ts

Appendix A. An overview of ECMAScript

Listing A.1. Hoisting a variable declaration

Listing A.2. Variables with block scoping

Listing A.3. this and that

Listing A.4. Fat-arrow function

Listing A.5. Rest operator

Listing A.6. Cloning with assign()

Listing A.7. Cloning with spread

Listing A.8. getStockPrice()

Listing A.9. Invoking getStockPrice ()

Listing A.10. Destructuring an object

Listing A.11. Destructuring a nested object

Listing A.12. super() and super

Listing A.13. Sharing a class property

Listing A.14. Using a promise

Listing A.15. Chaining promises

Listing A.16. Declaring two functions that use promises

Listing A.17. Declaring and invoking an async function

Appendix B. TypeScript essentials

Listing B.1. tsconfig.json

Listing B.2. Calculating tax in JavaScript

Listing B.3. Calculating tax in TypeScript

Listing B.4. Calculating tax in TypeScript, modified

Listing B.5. Using a private property

Listing B.6. Using access modifiers

Listing B.7. Creating a method

Listing B.8. Using inheritance

Listing B.9. Declaring an interface

Listing B.10. Using multiple interface implementations

Listing B.11. Using a generic type

Listing B.12. Creating an interface that uses generics

Listing B.13. A custom UIComponent decorator

Listing B.14. union.ts with any type

Listing B.15. union.ts with a union type

Appendix D. RxJS essentials

Listing D.1. Emitting 1,2,3

Listing D.2. Dot-chainable operators

Listing D.3. Using pipeable operators

Listing D.4. Using the map and reduce operators

Listing D.5. Using Observable.create()

Listing D.6. One subject and two subscribers

Listing D.7. Broadcasting trade orders

Listing D.8. Unwrapping nested observables with flatMap

Listing D.9. Subscribing to an HTTP request in Angular

Listing D.10. Two subjects and flatMap

Listing D.11. Two observables and switchMap

Listing D.12. Intercepting errors with catchError

Listing D.13. Implementing failover with catchError