1. Getting Started FREE CHAPTER

• Course Introduction
• What is Angular?
• Angular vs Angular 2 vs Angular 7
• Project Setup and First App
• Editing the First App
• The Course Structure
• How to get the Most out of the Course
• What is TypeScript?
• A Basic Project Setup using Bootstrap for Styling

2. The Basics

• Module Introduction
• How an Angular App gets Loaded and Started
• Components are Important!
• Creating a New Component
• Understanding the Role of AppModule and Component Declaration
• Using Custom Components
• Creating Components with the CLI & Nesting Components
• Working with Component Templates
• Working with Component Styles
• Fully Understanding the Component Selector
• What is Databinding?
• String Interpolation
• Property Binding
• Property Binding vs String Interpolation
• Event Binding
• Passing and Using Data with Event Binding
• Two-Way-Databinding
• Combining all Forms of Databinding
• Understanding Directives
• Using ngIf to Output Data Conditionally
• Enhancing ngIf with an Else Condition
• Styling Elements Dynamically with ngStyle
• Applying CSS Classes Dynamically with ngClass
• Outputting Lists with ngFor
• Getting the Index when using ngFor

3. Course Project - The Basics

• Project Introduction
• Planning the App
• Setting up the Application
• Creating the Components
• Using the Components
• Adding a Navigation Bar
• Creating a "Recipe" Model
• Adding Content to the Recipes Components
• Outputting a List of Recipes with ngFor
• Displaying Recipe Details
• Working on the ShoppingListComponent
• Creating an "Ingredient" Model
• Creating and Outputting the Shopping List
• Adding a Shopping List Edit Section
• Wrap Up & Next Steps

4. Debugging

• Understanding Angular Error Messages
• Debugging Code in the Browser Using Sourcemaps
• Using Augury to Dive into Angular Apps

5. Components & Databinding Deep Dive

• Module Introduction
• Splitting Apps into Components
• Property & Event Binding Overview
• Binding to Custom Properties
• Assigning an Alias to Custom Properties
• Binding to Custom Events
• Assigning an Alias to Custom Events
• Custom Property and Event Binding Summary
• Understanding View Encapsulation
• More on View Encapsulation
• Using Local References in Templates
• Getting Access to the Template & DOM with @ViewChild
• Projecting Content into Components with ng-content
• Understanding the Component Lifecycle
• Seeing Lifecycle Hooks in Action
• Lifecycle Hooks and Template Access
• Getting Access to ng-content with @ContentChild
• Wrap Up

6. Course Project - Components & Databinding

• Introduction
• Adding Navigation with Event Binding and ngIf
• Passing Recipe Data with Property Binding
• Passing Data with Event and Property Binding (Combined)
• Allowing the User to Add Ingredients to the Shopping List

7. Directives Deep Dive

• Module Introduction
• ngFor and ngIf Recap
• ngClass and ngStyle Recap
• Creating a Basic Attribute Directive
• Using the Renderer to build a Better Attribute Directive
• Using HostListener to Listen to Host Events
• Using HostBinding to Bind to Host Properties
• Binding to Directive Properties
• What Happens behind the Scenes on Structural Directives?
• Building a Structural Directive
• Understanding ngSwitch

8. Course Project – Directives

• Building and Using a Dropdown Directive

9. Using Services & Dependency Injection

• Module Introduction
• Why would you Need Services?
• Creating a Logging Service
• Injecting the Logging Service into Components
• Creating a Data Service
• Understanding the Hierarchical Injector
• How many Instances of Service Should It Be?
• Injecting Services into Services
• Using Services for Cross-Component Communication

10. Course Project - Services & Dependency Injection

• Introduction
• Setting up the Services
• Managing Recipes in a Recipe Service
• Using a Service for Cross-Component Communication
• Adding the Shopping List Service
• Using Services for "Push Notifications"
• Adding Ingredients to Recipes
• Passing Ingredients from Recipes to the Shopping List (via a Service)

11. Changing Pages with Routing

• Module Introduction
• Why do we need a Router?
• Setting up and Loading Routes
• Navigating with Router Links
• Understanding Navigation Paths
• Styling Active Router Links
• Navigating Programmatically
• Using Relative Paths in Programmatic Navigation
• Passing Parameters to Routes
• Fetching Route Parameters
• Fetching Route Parameters Reactively
• An Important Note about Route Observables
• Passing Query Parameters and Fragments
• Retrieving Query Parameters and Fragments
• Practicing and some Common Gotchas
• Setting up Child (Nested) Routes
• Using Query Parameters – Practice
• Configuring the Handling of Query Parameters
• Redirecting and Wildcard Routes
• Outsourcing the Route Configuration
• An Introduction to Guards
• Protecting Routes with canActivate
• Protecting Child (Nested) Routes with canActivateChild
• Using a Fake Auth Service
• Controlling Navigation with canDeactivate
• Passing Static Data to a Route
• Resolving Dynamic Data with the resolve Guard
• Understanding Location Strategies
• Wrap Up

12. Course Project – Routing

• Planning the General Structure
• Setting up Routes
• Adding Navigation to the App
• Marking Active Routes
• Fixing Page Reload Issues
• Child Routes: Challenge
• Adding Child Routing Together
• Configuring Route Parameters
• Passing Dynamic Parameters to Links
• Styling Active Recipe Items
• Adding Editing Routes
• Retrieving Route Parameters
• Programmatic Navigation to the Edit Page
• One Note about Route Observables

13. Understanding Observables

• Module Introduction
• Analysing a Built-in Angular Observable
• Building & Using a First Simple Observable
• Building & Using a Custom Observable from Scratch
• Unsubscribe!
• Where to learn more
• Using Subjects to Pass AND Listen to Data
• Understanding Observable Operators
• Wrap Up

14. Course Project – Observables

• Improving the Reactive Service with Observables (Subjects)

15. Handling Forms in Angular Apps

• Module Introduction
• Why do we Need Angular's Help?
• Template-Driven (TD) vs Reactive Approach
• An Example Form
• TD: Creating the Form and Registering the Controls
• TD: Submitting and Using the Form
• TD: Understanding Form State
• TD: Accessing the Form with @ViewChild
• TD: Adding Validation to check User Input
• TD: Using the Form State
• TD: Outputting Validation Error Messages
• TD: Set Default Values with ngModel Property Binding
• TD: Using ngModel with Two-Way-Binding
• TD: Grouping Form Controls
• TD: Handling Radio Buttons
• TD: Setting and Patching Form Values
• TD: Using Form Data
• TD: Resetting Forms
• Introduction to the Reactive Approach
• Reactive: Setup
• Reactive: Creating a Form in Code
• Reactive: Syncing HTML and Form
• Reactive: Submitting the Form
• Reactive: Adding Validation
• Reactive: Getting Access to Controls
• Reactive: Grouping Controls
• Reactive: Arrays of Form Controls (FormArray)
• Reactive: Creating Custom Validators
• Reactive: Using Error Codes
• Reactive: Creating a Custom Async Validator
• Reactive: Reacting to Status or Value Changes
• Reactive: Setting and Patching Values

16. Course Project – Forms

• Introduction
• TD: Adding the Shopping List Form
• Adding Validation to the Form
• Allowing the Selection of Items in the List
• Loading the Shopping List Items into the Form
• Updating existing Items
• Resetting the Form
• Allowing the the User to Clear (Cancel) the Form
• Allowing the Deletion of Shopping List Items
• Creating the Template for the (Reactive) Recipe Edit Form
• Creating the Form for Editing Recipes
• Syncing HTML with the Form
• Adding Ingredient Controls to a Form Array
• Adding new Ingredient Controls
• Validating User Input
• Submitting the Recipe Edit Form
• Adding a Delete and Clear (Cancel) Functionality
• Redirecting the User (after Deleting a Recipe)
• Adding an Image Preview
• Providing the Recipe Service Correctly
• Deleting Ingredients and Some Finishing Touches

17. Using Pipes to Transform Output

• Introduction & Why Pipes are Useful
• Using Pipes
• Parametrizing Pipes
• Where to learn more about Pipes
• Chaining Multiple Pipes
• Creating a Custom Pipe
• Parametrizing a Custom Pipe
• Example: Creating a Filter Pipe
• Pure and Impure Pipes (or: How to "fix" the Filter Pipe)
• Understanding the "async" Pipe

18. Making Http Requests

• Introduction & How Http Requests Work in SPAs
• Example App & Backend Setup
• Sending Requests (Example: POST Request)
• Adjusting Request Headers
• Sending GET Requests
• Sending a PUT Request
• Transform Responses Easily with Observable Operators (map())
• Using the Returned Data
• Catching Http Errors
• Using the "async" Pipe with Http Requests

19. Course Project – Http

• Introduction
• Setting up Firebase as a Dummy Backend
• Sending PUT Requests to Save Data
• GETting Back the Recipes
• Transforming Response Data to Prevent Errors

20. Authentication & Route Protection in Angular Apps

• Module Introduction
• How Authentication Works in Single-Page-Applications
• Creating a Signup Page and Route
• Setting up the Firebase SDK
• Signing Users Up
• Signin Users In
• Requiring a Token (on the Backend)
• Sending the Token
• Checking and Using Authentication Status
• Adding a Logout Button
• Route Protection and Redirection Example
• Wrap Up

21. Using Angular Modules & Optimizing Apps

• Module Introduction
• The Idea behind Modules
• Understanding the App Module
• Understanding Feature Modules
• Creating a Recipe Feature Module
• Registering Routes in a Feature Module
• Understanding Shared Modules
• Creating a Shared Module
• Creating a Shopping List Feature Module
• Loading Components via Selectors vs Routing
• A Common Gotcha
• Creating the Auth Feature Module
• Understanding Lazy Loading
• Adding Lazy Loading to the Recipes Module
• How Modules and Services Work Together
• Understanding the Core Module
• Creating a Basic Core Module
• Restructuring Services to use the Child Injector
• Using Ahead-of-Time Compilation
• How to use AoT Compilation with the CLI
• Preloading Lazy Loaded Routes
• Wrap Up

22. Deploying an Angular App

• Module Introduction
• Deployment Preparations and Important Steps
• Example: Deploying to AWS S3

23. Bonus: The HttpClient

• Module Introduction
• The Documentation
• Unlocking
• Request Configuration and Response
• Requesting Events
• Settings Headers
• Http Parameters
• Progress
• Interceptors
• Modifying Requests in Interceptors
• Multiple Interceptors
• Wrap Up

24. Bonus: Working with NgRx in our Project

• Module Introduction
• State Challenges
• Getting Started with Reducers
• Adding Actions
• Finishing the First Reducer
• Registering the Application Store
• Selecting Data from State
• Dispatch Actions
• More Actions and Adding Ingredients
• Dispatching Update and Deleting Shopping List Actions
• Expanding App State
• Editing the Shopping-List via NgRx
• Managing all Relevant State
• Authentication and Side Effects – Introduction
• Setting up the Auth Store Files
• The Reducer
• Adding Reducer Logic & Actions
• Adjusting the App Module Setup
• Using Authentication
• Dispatch Actions
• Getting State Access in Http Interceptor
• Handling the Auth Token
• Only React to Actions Once via take(1)
• A Closer Look at Effects
• Auth Effects and Actions
• Effects - How they Work
• Adding Auth Signup
• Adding Auth Signin
• Navigation as a Side Effect
• Handling Logout via NgRx
• Additional Fixes
• Redirecting Upon Logout
• What's Next?
• The Router Store Package
• Store Devtools
• Lazy Load and Dynamic Injection
• Adding Recipe Actions
• Adding Recipe Reducers
• Dispatching and Selecting State
• Viewing and Deleting Recipes via NgRx
• Editing and Updating Recipes via NgRx
• Recipes Side Effects - Fetching from Server
• Recipes Side Effects - Storing Recipes on Server
• Cleaning Up
• Wrap Up

25. Bonus: Angular Universal

• Module Introduction
• A Look at the Prequisites
• Creating the Server Main File (main.server.ts)
• Working on the tsconfig Configuration
• Handling SSR as a New App (in .angular-cli.json)
• Creating the Server
• Wrap Up

26. Angular Animations

• Introduction
• Setting up the Starting Project
• Animations Triggers and State
• Switching between States
• Transitions
• Advanced Transitions
• Transition Phases
• The "void" State
• Using Keyframes for Animations
• Grouping Transitions
• Using Animation Callbacks

27. A Basic Introduction to Unit Testing in Angular Apps

• Introduction
• Why Unit Tests?
• Analysing the Testing Setup (as created by the CLI)
• Running Tests (with the CLI)
• Adding a Component and some fitting Tests
• Testing Dependencies: Components and Services
• Simulating Async Tasks
• Using "fakeAsync" and "tick"
• Isolated vs Non-Isolated Tests

28. Course Roundup

• Course Roundup

29. Custom Project & Workflow Setup

• Introduction
• Initializing the Project
• Setting up the Basic Project Files
• Installing the Core Dependencies
• Filling the Project Files with Some Life
• index.html & Polyfills
• Installing Development Dependencies
• Setting up a Development Workflow
• Finishing & Using the Development Workflow
• Setting up a Production Workflow
• Adding Types & Fixing Bugs
• Finishing Touches