Starting with Angular

● JavaScript, TypeScript, Angular

○ ES5
○ ES2015
○ ES.next
○ TypeScript
● Simplest Angular application
○ Appearance of the in-class examples - CSS
○ Development tooling for class use
● The TypeScript module system
○ Dividing a program into modules / files
● Templates and bindings
○ Template binding expressions
○ Null coalescing / safe traversal
○ Events and event bindings
● Multiple Components
○ Using inspector tooling to understand the component hierarchy
● Multiple NgModules
○ Inter-module dependencies
○ Imports and Exports
○ entryComponents

● Lazy loading
○ Routes as the unit of lazy loading
○ Preloading: eager lazy routes

Building with Components

● Development tooling
○ Angular CLI - the powerful default choice
○ Webpack - for custom builds
○ SystemJS - for browser-only development
● Starting a project with Angular CLI
○ Creating your component hierarchy
 ○ Visual wireframing
● Essential built-in directives
○ Branching with `*ngIf`
○ Iteration with `*ngFor`
● Pipes
○ Using the built-in pipes
○ When are pipes the right solution?
● Class and style bindings
○ [class.x] bindings
○ [style.y] bindings
○ [ngClass] for more complex class selection
● Component data binding
○ Bind data "downward" with @Input()
○ Use events to send data upward with @Output()

Services, reactivity, and HTTP

● Dependency injection
○ Introducing injection with HTTP
○ Why dependency injection?
○ What can be injected?
● Creating services
○ Making a service available for dependency injection
○ Inject HTTP into a service instead of a component
● Observables
○ The least you need to know about Observables
○ Observables as the pipeline of data flow in Angular.
● The async pipe
○ Observables as a source of tedium and boilerplate
○ Automatic subscription and unsubscription

Application state, forms, navigation, and data flow

● Reactive forms
○ Control groups
○ FormBuilder
 ○ ngSubmit
● Component-local State
○ Suitable uses for component-local state
○ Where component-local state becomes problematic
● Route as navigational state
○ Nested routes
○ Routing to components
○ Configuring the router
○ HTML5 vs hash routes
○ Route parameters - navigational state to a specific entity
○ Route-driven observable data loading
● Sharing state with a Service
○ Data fields in a Service
○ Observable data in a Service
● NgRx Store - Elm/Redux Architecture
○ An industry-wide idea
○ History
○ Angular implementation
○ Immutable data with NgRx Store
○ Managing complexity and boilerplate
● NgRx Effects
● The smart/display component pattern
○ Motivations
○ Implementation
● Observable composing and chaining
○ Interactive search with observability
● Which Map Operator?
○ Loading data to the same display area
○ Saving data, when the save order doesn't matter
○ Saving data, when the save order DOES matter
○ Filtered list via Observables

Less-used Angular features (topics depend on time)

● ng-container
○ Sentence example
 ○ "Glossary of Useful Terms" example
○ "Important Programming Languages" example
○ Resources
● Complex forms
○ Custom validators
○ Custom async validators
● Complex routing
○ Auxiliary routes
● Route Guards
○ CanActivate
○ CanDeactivate
● Other route guards
○ Route guards - protecting routes
○ Resolve - loading data during routing
○ Reusing Observable data
● Reactive forms
○ Standalone reactive controls
○ Observable error handling
● The component lifecycle
● Change detection strategies - and why it matters
○ How change detection works
○ Change detection modes
○ Zone.JS
● Decorator directives
○ Introduction
○ Examples
● NgContent (was transclusion)
○ Multiple Ng-Content
● ngSwitch
● Sanitization - secure handling of user-provided data
● Component Inheritance
○ Reusing code with a different template
● Multi-providers
● Custom pipes
● Unit testing
 ○ Unit testing at the command line (already discussed)
○ Unit testing in the browser
● More unit testing
○ Unit testing services
○ Asyncronous testing
○ Mocking HTTP responses
● Component styling
○ Scoped CSS
○ ViewEncapsulation
○ Targeting the component itself

Upgrading, third-party code, examples, and legacy features

- extra material for Q&A
● Upgrading from AngularJS 1.x
○ ngUpgrade
○ ngForward
○ Where did 1.x features go?
○ Additional Resources
○ Loading data with retry
● Wrapping an API with observables
● Dynamic Reactive Forms
○ Transclusion use case example
● Centralized state management with hierarchical DI
○ State in observable in a service
● Observable bindings
○ Observables in more depth
● Promises - still available, still useful
● HTTP API access via promises
● Two-way binding with ngModel
○ ngModel with more control types
● Template-driven forms
● Observables with the older, pre-pipe() syntax
 ○ Advantages of Pipeable Operators
○ Advantages of Legacy Syntax

RxJS
● Introduction to RxJS
● RxJs Observable
● Building Components with RxJs - Imperative Design
● Building Components with RxJs - Reactive Design
● RxJs Operators
● RxJs Error Handling
● Implementing a Custom RxJs Operator
● RxJs Subjects
● Store Service Design - What Subject to Use?
● The Store Pattern - Loading Initial Data, Selector Methods, Consuming Data
BehaviorSubject Store - Example of a Data Modification Operation Refactoring
the Course Component for Using the Store

Angular Material
● Navigation and Containers - Section Introduction
● Material Icon Component - Styling Angular Components
● The Material SideNav Navigation Menu
● Container Components - Tab Containers and Material Cards
● Angular Material Data Source - Loading Data From The Backend
● Material Dialog Body Implementation
● Receiving Input Data Inside the Material Dialog
● Angular Material Dialog - Passing Input Data
● Angular Material DatePicker with MomentJs Integration
● Dialog Section Conclusion - Sending Dialog Output Data
Web Accessibility
● Accessibility Overview
● Focus
● Semantic Basics
● Navigating Content
● Aria
● Styles for Accessibility
● Keyboard-Centric Interactions