Index

Symbols

# (pound sign), prefacing template reference variables, Control Validity
$event variable, Alternative to ngModel—Event and Property Binding, ngModel
() (parentheses), event binding syntax, Understanding Event Binding, Understanding Event Binding
* (asterisk), beginning structural directives, Built-In Structural Directives
@Component decorator, Defining a Component
@Injectable decorator, Digging into the Example
@NgModule TypeScript annotation, Main Module—app.module.ts
[(ngModel)] banana-in-a-box syntax, ngModel
[] (square brackets), property binding syntax, Understanding Property Binding, Understanding Event Binding
{{ }} (double curly braces), interpolation syntax, Root Component—AppComponent, Understanding Data Binding
- replacing in components, Others

A

Access-Control-Allow-Origin: header, API/Server Calls and CORS
ActivatedRoute, Required Route Params, Navigating in Your Application
- snapshot, Optional Route Params
- subscribing to changes on data element, Preloading Data Using Resolve
AfterContentChecked interface, Interfaces and Functions
AfterContentInit interface, Interfaces and Functions
AfterViewChecked interface, Interfaces and Functions
AfterViewInit interface, Interfaces and Functions
ahead-of-time (AOT) compilation, Production Build
- and Build Optimizer, Ahead-of-Time (AOT) Compilation and Build Optimizer
Angular
- advantages of, Why Angular
- and AngularJS, Introducing Angular
- core fundamentals, A Word on Web Application Development Today
- shift to property and event binding, Understanding Event Binding
- starting a project, Starting Your First Angular Project
- testing utilities, Testing and Angular
- versioning and upgrades, Why Angular
Angular services, Angular Services-Exercise
- about, What Are Angular Services?
- creating, Creating Our Own Angular Service-Angular and Dependency Injection
  - Angular and dependency injection, Angular and Dependency Injection-Angular and Dependency Injection
  - examining the code, Digging into the Example-Digging into the Example
  - introduction to dependency injection, An Introduction to Dependency Injection
- moving to asynchronous operation, RxJS and Observables: Moving to Asynchronous Operations-RxJS and Observables: Moving to Asynchronous Operations
- service dependencies and interceptors, Interceptors
- unit testing, Unit Testing Services-Exercise
  - async services, Unit Testing Async-Unit Testing Async
  - HTTP calls, Unit Testing HTTP-Conclusion
  - testing components with a service dependency, Testing Components with a Service Dependency-Testing Components with a Fake Service
Angular Universal, Server-Side Rendering and Handling SEO
- caveats, Server-Side Rendering and Handling SEO
- files needed to make it work, Server-Side Rendering and Handling SEO
- running, Running Angular Universal
animations, controlling for components, Others
annotations, Main Module—app.module.ts
API/server calls, API/Server Calls and CORS
AppComponent (example), Root Component—AppComponent
applications (Angular)
- basics of, Basics of an Angular Application-Root Component—AppComponent
- creating on the CLI, Starting Your First Angular Project
AppRoutesModule, Importing the Router Module
APP_BASE_HREF, setting value, Making the changes, Additions for the server side
as operator, Advanced Observables
async utility function, Writing an Angular-Aware Unit Test, Unit Testing Async
- fakeAsync function vs., Unit Testing Async
asynchronous operations in services, RxJS and Observables: Moving to Asynchronous Operations-RxJS and Observables: Moving to Asynchronous Operations
- testing, Unit Testing Async-Unit Testing Async
asynchronous vs. synchronous forms, Understanding the Differences
AsyncPipe, Advanced Observables
- caution with, Advanced Observables
attribute directives, Directives and Components
- built-in, Built-In Attribute Directives-Alternative Class and Style Binding Syntax
  - alternative class and style binding syntax, Alternative Class and Style Binding Syntax
  - NgClass, NgClass-NgClass
  - NgStyle, NgStyle-NgStyle
attributes, case sensitive, Input
authenticated-only routes, Authenticated-Only Routes-Authenticated-Only Routes

B

banana-in-a-box syntax [()], ngModel
base HTML tag, Base Href, Handling Deep-Linking
beforeEach function, Writing an Angular-Aware Unit Test, How to Unit Test Services
behavior-driven development (BDD) frameworks, Testing and Angular
bootstrap array, Main Module—app.module.ts
Build Optimizer, Ahead-of-Time (AOT) Compilation and Build Optimizer
bundling app and library files, Production Build

C

caching, Caching
CanActivate interface, Authenticated-Only Routes
canActivate method, Authenticated-Only Routes
CanDeactivate guard, Preventing Unload-Preventing Unload
case-sensitive attributes, Input
change detection for components, Change Detection-Change Detection
changeDetection attribute, Others
ChangeDetectionStrategy.Default, Others, Change Detection
ChangeDetectionStrategy.OnPush, Others, Change Detection
child routes, Lazy Loading
circular dependency, Interceptors
class member variables, declaring in component creation, Understanding Data Binding
classes
- CSS
  - alternative class binding syntax, Alternative Class and Style Binding Syntax
  - applying/removing with NgClass directive, NgClass-NgClass
- documentation on TypeScript classes, Using Models for Cleaner Code
- generating TypeScript class on CLI, Using Models for Cleaner Code
cloning HttpRequest, Interceptors
code examples from this book, Using Code Examples
- getting the codebase, Getting the Codebase
cold vs. hot observables, Advanced Observables
command-line interface (CLI), Angular CLI
- Angular CLI build wiki, Deploying an Angular Application
- Angular CLI configuration JSON file, Configuration
- generating a skeleton class on, Using Models for Cleaner Code
- generating components and other Angular elements, Steps in Creating New Components
- running an application on, Running the Application
- running unit tests from, Running the Tests
- understanding, Understanding the Angular CLI
components, Understanding and Using Angular Components-Exercise
- about, Components—A Recap
- and modules, Components and Modules
- Angular service sharing data between, Digging into the Example
- component class, Root Component—AppComponent
- creating, Creating a Component-Using Our New Component
  - steps in, Steps in Creating New Components
- data binding, Understanding Data Binding-Understanding Data Binding
- defining, Defining a Component-Others
  - other attributes, Others
  - selector, Selector
  - style encapsulation, Style Encapsulation
  - styles, Styles
  - template, Template
- directives and, Directives and Components
- event binding, Understanding Event Binding-Understanding Event Binding
- input, Input
- input and output, change detection, Change Detection-Change Detection
- lifecycle, Component Lifecycle-Interfaces and Functions
  - interfaces and functions, Interfaces and Functions-Interfaces and Functions
- output, Output
- property binding, Understanding Property Binding-Understanding Property Binding
- testing (see testing)
- testing components with a service dependency, Testing Components with a Service Dependency-Testing Components with a Fake Service
  - testing with a fake service, Testing Components with a Fake Service
  - testing with a mock service, Testing Components with a Mock Service
  - testing with a real service, Testing Components with a Real Service
- using interfaces for cleaner code, Using Models for Cleaner Code-Using Models for Cleaner Code
- using our new component, Using Our New Component
- view projection, View Projection-View Projection
comprehensive framework (Angular), Why Angular
control state
- in reactive forms, Control State, Validity, and Error Messages
- in template-driven forms, Control State-Control Validity
control validity
- in reactive forms, Control State, Validity, and Error Messages
- in template-driven forms, Control Validity-Control Validity
Cross-Origin Resource Sharing (CORS), API/Server Calls and CORS
CSS, Starting Your First Angular Project
- alternative class and style binding syntax, Alternative Class and Style Binding Syntax
- and Angular applications, Understanding Data Binding
- app-selector, Root Component—AppComponent
- app.component.css file, Navigating Within the Application
- caching CSS files in Angular applications, Caching
- classes for control state, Control State, Control State, Validity, and Error Messages
- classes, applying/removing with NgClass directive, NgClass-NgClass
- scoping with shadow DOM, Style Encapsulation
- selector for components, Selector
- styles/properties, manipulating with NgStyle directive, NgStyle-NgStyle
- styleUrls for templates, Root Component—AppComponent
custom components, Why Angular

D

data binding, Why Angular
- Angular form with, A Complete Form
- component title, Root Component—AppComponent
- in components (example), Understanding Data Binding-Understanding Data Binding
- two-way, with ngModel, Setting Up Forms
- using form control binding instead of ngModel, Form Controls
data model in reactive forms, Form and Data Model-Form and Data Model
deactivation of a route, preventing, Preventing Unload-Preloading Data Using Resolve
declarations, Main Module—app.module.ts
- adding new components to declarations array, Steps in Creating New Components
- components used within modules, Components and Modules
declarations attribute, Components and Modules
decorators (TypeScript), Main Module—app.module.ts
deep-linking, handling in production apps, Handling Deep-Linking
default path (for routes), Wildcards and Defaults
dependencies
- for server-side rendering and SEO, Dependencies
- handling service dependencies in unit testing, How to Unit Test Services
- service dependencies and interceptors, Interceptors
dependency injection, Why Angular
- Angular dependency injection system, Angular and Dependency Injection-Angular and Dependency Injection
- Injectable decorator and, Digging into the Example
- introduction to, An Introduction to Dependency Injection
deploying Angular applications, Deploying an Angular Application
development environment
- getting started with, Getting Started with Your Development Environment
  - Angular CLI, Angular CLI
  - codebase, getting, Getting the Codebase
  - Node.js, Node.js
  - TypeScript, TypeScript
development mode, running application in, Running the Application
directives, Useful Built-In Angular Directives-Exercise, Components—A Recap
- and components, Directives and Components
- built-in attribute directives, Built-In Attribute Directives-Alternative Class and Style Binding Syntax
  - alternative class and style binding syntax, Alternative Class and Style Binding Syntax
  - NgClass, NgClass-NgClass
  - NgStyle, NgStyle-NgStyle
- built-in structural directives, Built-In Structural Directives-Multiple Sibling Structural Directives
  - multiple sibling, Multiple Sibling Structural Directives
  - NgFor, NgFor-NgFor
  - NgIf, NgIf-NgIf
  - NgSwitchCase and NgSwitchDefault, NgSwitch
DoCheck interface, Interfaces and Functions
DOM
- binding DOM properties, Understanding Property Binding-Understanding Property Binding
- shadow DOM, Style Encapsulation

E

encapsulation attribute, Component decorator, Style Encapsulation
environments, Different Environments
error handling, HTTP calls, Making HTTP GET/POST Calls
error messages, adding to reactive forms, Control State, Validity, and Error Messages
event binding, Understanding Event Binding-Understanding Event Binding
- input event binding in template-driven forms, Alternative to ngModel—Event and Property Binding
- ngModelChange, ngModel
- registering for events in components, Output
- using in template-driven forms, Alternative to ngModel—Event and Property Binding
EventEmitter, Making HTTP GET/POST Calls
- registering as output from a component, Output
exportAs attribute, Others
exporting components, Others
exports attribute, Components and Modules

F

fakeAsync function vs. async function, Unit Testing Async
falsy values in JavaScript, NgClass
fixture instance, Writing an Angular-Aware Unit Test
fixture.debugElement function, Writing an Angular-Aware Unit Test
fixture.detectChanges function, Writing an Angular-Aware Unit Test, Testing Component Interactions
FormArrays, FormArrays-FormArrays
FormBuilders, using in reactive forms, Form Builders
FormControls (reactive forms), Form Controls-Form Controls
- checking control state, Control State, Validity, and Error Messages
FormGroups
- using in reactive forms, Form Groups-Form Groups, Form Builders
  - adding to/removing from FormArrays, FormArrays
- using in template-driven forms, Working with FormGroups-Working with FormGroups
forms, Working with Template-Driven Forms
- (see also reactive forms; template-driven forms)
- Create Stock Form (example), Digging into the Example
FormsModule, importing, Setting Up Forms
forRoot method, Importing the Router Module
frameworks
- advantages of using, A Word on Web Application Development Today
- for testing, Testing and Angular

G

GET/POST calls (HTTP), making, Making HTTP GET/POST Calls-Making HTTP GET/POST Calls
Git repository for this book, Getting the Codebase

H

headers (HTTP), sending with request, Options—Headers/Params
hierarchical dependency injection, Angular and Dependency Injection
hooks in component lifecycle, Understanding Data Binding
hot vs. cold observables, Advanced Observables
HTML
- and case-sensitive attributes, Input
- native form validation from, Control State
- scoping with shadow DOM, Style Encapsulation
HTML attributes vs. DOM properties, Understanding Property Binding
HTML elements, removing vs. hiding, NgIf
HTTP calls in Angular, Making HTTP Calls in Angular-Exercise
- advanced HTTP, Advanced HTTP-Interceptors
  - interceptors, Interceptors-Interceptors
  - options, headers/params, Options—Headers/Params-Options—Headers/Params
  - options, observe/response type, Options—Observe/Response Type-Options—Observe/Response Type
- advanced observables, Advanced Observables-Conclusion
- HttpClient, Introducing HttpClient-Making HTTP GET/POST Calls
  - server setup, Server Setup
- making GET/POST calls, Making HTTP GET/POST Calls-Making HTTP GET/POST Calls
- unit testing, Unit Testing HTTP-Conclusion
- using HttPClientModule, Using HttpClientModule
http service (deprecated), Introducing HttpClient
httpBackend, Unit Testing HTTP
httpBackend.expectOne, Unit Testing HTTP
HttpClient
- introduction to, Introducing HttpClient-Making HTTP GET/POST Calls
- service dependencies and interceptors, Interceptors
httpClient.get, httpClient.post, and httpClient.patch, Making HTTP GET/POST Calls
HttpClientModule, Unit Testing HTTP
HttpClientTestingModule, Unit Testing HTTP
HttpHandler, Interceptors
HttpHeaders object, Options—Headers/Params
HttpInterceptor interface, Interceptors
HttpParams class, Options—Headers/Params
HttpRequest, Interceptors, Unit Testing HTTP
- immutability of, Interceptors
HttpResponse, Making HTTP GET/POST Calls
- immutability of, Interceptors
HttpService, An Introduction to Dependency Injection
HttpTestingController, Unit Testing HTTP

I

imports, Main Module—app.module.ts
imports attribute, Components and Modules
index.html file, Root HTML—index.html
- caching, Caching
inject function, How to Unit Test Services
injector, getting services from, Testing Components with a Fake Service
inline styles, Starting Your First Angular Project
Input decorator, Input
input element
- in reactive forms, Form Controls
- in template-driven forms, Alternative to ngModel—Event and Property Binding
intercept method, Interceptors
interceptors, Interceptors-Interceptors
- creating, Interceptors
- service dependencies and, Interceptors
interfaces
- in component lifecycle, Interfaces and Functions-Interfaces and Functions
- using for cleaner code, Using Models for Cleaner Code-Using Models for Cleaner Code
interpolation, Understanding Data Binding
- controlling in components, Others
isPlatformBrowser, Making the changes

J

Jasmine, Testing and Angular
- matchers, documentation on, An Isolated Unit Test
- spies, using to spy on a service, Testing Components with a Mock Service
- writing unit test with, Writing Unit Tests
JavaScript, A Word on Web Application Development Today
- caching JS files in Angular applications, Caching
- translation of TypeScript code to, Basics of an Angular Application
- truthy and falsy values in, NgClass
just-in-time (JIT) compilation, Ahead-of-Time (AOT) Compilation and Build Optimizer

K

Karma, Testing and Angular
- Angular tests running via, in Chrome, Running the Tests
- configuration, Karma Config
- debugging tests using Chrome, Debugging
- running service tests in, How to Unit Test Services

L

lazy loading, Lazy Loading-Lazy Loading
lifecycle hooks for components, Understanding Data Binding
LoginComponent, Navigating in Your Application, Optional Route Params

M

main.server.ts file, Additions for the server side
main.ts file, The Entry Point—main.ts
matchers (Jasmine), An Isolated Unit Test
message, displaying to user on stock creation, Digging into the Example
minification in production builds, Production Build
modules
- components and, Components and Modules
- issues using a component, checking configuration for, Components and Modules

N

navigate method (router), Navigating in Your Application
ng build --prod command, Production Build
ng g guard guards/auth command, Authenticated-Only Routes
ng g service services/message --module=app command, Angular and Dependency Injection
ng generate component stock/stock-item command, Steps in Creating New Components
ng generate module app-routes --flat --module=app command, Importing the Router Module
ng help command, Starting Your First Angular Project
ng new command, arguments, Starting Your First Angular Project
ng serve --proxy proxy.config.json command, API/Server Calls and CORS
ng serve command, Running the Application
ng test command, Running the Tests
ng-content element, View Projection
ng-dirty class, Control State, Control State, Validity, and Error Messages
ng-invalid class, Control State, Control State, Validity, and Error Messages
ng-pristine class, Control State, Control State, Validity, and Error Messages
ng-untouched and ng-touched classes, Control State, Control State, Validity, and Error Messages
ng-valid class, Control State, Control State, Validity, and Error Messages
ngAfterContentChecked function, Interfaces and Functions
ngAfterContentInit function, Interfaces and Functions
ngAfterViewChecked function, Interfaces and Functions
ngAfterViewInit function, Interfaces and Functions
NgClass directive, NgClass-NgClass
ngDoCheck function, Interfaces and Functions
ngExpressEngine, Additions for the server side
NgFor directive, NgFor-NgFor
- running NgIf with, Multiple Sibling Structural Directives
- using to generate select options in form, A Complete Form
ngForm object, Control Validity
NgForOf class, NgFor
NgIf directive, NgIf-NgIf
- running with NgFor, Multiple Sibling Structural Directives
ngModel directive, Setting Up Forms
- expanded syntax, use of, ngModel
- two-way data binding in template-driven forms, ngModel
- using event and property binding instead of, Alternative to ngModel—Event and Property Binding
ngModelChange event binding, ngModel
ngModelGroup directive, Working with FormGroups
NgModule, attributes affecting components, Components and Modules
ngOnChanges function, Interfaces and Functions
ngOnDestroy function, Interfaces and Functions
ngOnInit function, Understanding Data Binding, Interfaces and Functions, An Isolated Unit Test
NgStyle directive, NgStyle-NgStyle
ngSubmit event handler, A Complete Form, Form Groups
NgSwitch directive, NgSwitch
NgSwitchCase directive, NgSwitch
NgSwitchDefault directive, NgSwitch
ngValue directive, A Complete Form
Node.js server, Server Setup
Node.js, installing, Node.js
NPM, Node.js
- scoped packages, Angular CLI

S

scoped packages (NPM), Angular CLI
scripts section in package.json, Configuration
search engine optimization (SEO), Server-Side Rendering and Handling SEO-Running Angular Universal
search-as-you-type application (example), Advanced Observables-Conclusion
select menu, template-driven form, A Complete Form
selector attribute, components, Selector
server-side rendering and handling SEO, Server-Side Rendering and Handling SEO-Running Angular Universal
- additions for the server side, Additions for the server side
- configuration, Configuration
- dependencies, Dependencies
- making changes to the code, Making the changes
- running Angular Universal, Running Angular Universal
server.ts file, Additions for the server side
servers
- API/server calls in production apps, API/Server Calls and CORS
- setting up frontend server to serve requests by priority, Handling Deep-Linking
- setup for Angular routing, Server Setup
- setup for HTTP server, Server Setup
service providers (see providers)
services, Angular Services
- (see also Angular services)
- providing an instance of, Testing Components with a Fake Service
shadow DOM, Style Encapsulation
Single-Page Applications (SPAs), Introducing Angular
snapshot (ActivatedRoute), Optional Route Params
specifications (.spec.ts files), test.ts, How to Unit Test Services
stock-item, generating, Steps in Creating New Components
structural directives, Directives and Components, Built-In Structural Directives-Multiple Sibling Structural Directives
- multiple sibling directives, Multiple Sibling Structural Directives
- NgFor, NgFor-NgFor
- NgIf, NgIf-NgIf
- NgSwitchCase and NgSwitchDefault, NgSwitch
style binding
- alternative syntax for, Alternative Class and Style Binding Syntax
- documentation on, Alternative Class and Style Binding Syntax
styles
- defining for components, Styles
- encapsulation by Angular, Style Encapsulation
styles attribute, Styles
styleUrls attribute, Root Component—AppComponent, Styles
synchronous vs. asynchronous forms, Understanding the Differences

T

template attribute, Template
template reference variables, Control Validity, Control Validity
template-driven forms, Working with Template-Driven Forms-Exercise
- complete form (example), A Complete Form-A Complete Form
- control state, Control State-Control Validity
- control validity, Control Validity-Control Validity
- differences from reactive forms, Understanding the Differences
- event and property binding as alternative to ngModel, Alternative to ngModel—Event and Property Binding
- setting up forms, Setting Up Forms
- using ngModel for two-way data binding, ngModel
- working with FormGroups, Working with FormGroups-Working with FormGroups
templates, Starting Your First Angular Project
- for components, Template
- multiline, defining with backtick operator, Template
- stock service (example), Digging into the Example
templateUrl attribute, Root Component—AppComponent, Template
TestBed, Writing an Angular-Aware Unit Test
- configuring for service unit testing, How to Unit Test Services
- handling service dependencies in, How to Unit Test Services
testing, Why Angular, Testing Angular Components-Exercise
- benefits of unit tests, Why Unit Test?
- component interactions, Testing Component Interactions-Testing Component Interactions
- debugging tests, Debugging
- frameworks and libraries used for, Testing and Angular
- running the tests, Running the Tests
- setup for, The Test Setup-test.ts
  - Karma configuration, Karma Config
  - test.ts file, test.ts
- unit testing services, Unit Testing Services-Exercise
  - asynchronous code, Unit Testing Async-Unit Testing Async
  - HTTP calls, Unit Testing HTTP-Conclusion
  - initial setup, How to Unit Test Services
  - StockService (example), How to Unit Test Services
  - testing components with a service dependency, Testing Components with a Service Dependency-Testing Components with a Fake Service
- writing Angular-aware unit test, Writing an Angular-Aware Unit Test
- writing isolated unit test, Writing Unit Tests-Running the Tests
testing utilities (Angular), Testing and Angular, Writing an Angular-Aware Unit Test
trackBy option, NgFor directive, NgFor
truthy and falsy in JavaScript, NgClass
ts-loader, Dependencies, Configuration
two-way data binding, Setting Up Forms
TypeScript
- advantage of using, TypeScript
- declaring a parameter and property simultaneously, Digging into the Example
- decorators, Main Module—app.module.ts
- installing, TypeScript
- translation of code into JavaScript, Basics of an Angular Application
- tsconfig.server.json file, Configuration

U

uglification of code in production builds, Production Build
unit testing, Writing Unit Tests
- (see also testing)
- benefits of, Why Unit Test?
URLs
- base path for relative URLs in an application, Base Href
- templateUrl, Template

V

validation of forms
- control state in template-driven forms, Control State-Control Validity
- control validity in reactive forms, Control State, Validity, and Error Messages
- control validity in template-driven forms, Control Validity-Control Validity
- validators in reactive forms, Form Groups
view projection, View Projection-View Projection
view providers, Others
ViewEncapsulation.Emulated, Style Encapsulation
ViewEncapsulation.Native, Style Encapsulation
ViewEncapsulation.None, Style Encapsulation

W

web application development, current state of, A Word on Web Application Development Today
webpack.server.config.js file, Configuration
whenStabilize function, Unit Testing Async
whitespaces, stripping or preserving in components, Others
wildcards in path matches, Wildcards and Defaults

X

XHR calls, testing code with, Unit Testing HTTP

Previous Chapter

12. Productionizing an Angular App

Next Chapter

About the Author

Table of Contents for Angular: Up and Running

Index

Symbols

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Table of Contents for
Angular: Up and Running