How an Angular App gets Loaded and Started
Components are Important!
Understanding the Role of AppModule and Component Declaration
Creating Components with the CLI & Nesting Components
Working with Component Templates
Working with Component Styles
Fully Understanding the Component Selector
Property Binding vs String Interpolation
Passing and Using Data with Event Binding
Combining all Forms of Databinding
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
Setting up the Application
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
Splitting Apps into Components
Property & Event Binding Overview
Binding to Custom Properties
Assigning an Alias to Custom Properties
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
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
Why would you Need Services?
Creating a Logging Service
Injecting the Logging Service into Components
Understanding the Hierarchical Injector
How many Instances of Service Should It Be?
Injecting Services into Services
Using Services for Cross-Component Communication
Managing Recipes in a Recipe Service
Using a Service for Cross-Component Communication
Adding the Shopping List Service
Using Services for Pushing Data from A to B
Adding Ingredients to Recipes
Passing Ingredients from Recipes to the Shopping List (via a Service)
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
Planning the General Structure
Adding Navigation to the App
Fixing Page Reload Issues
Adding Child Routing Together
Configuring Route Parameters
Passing Dynamic Parameters to Links
Styling Active Recipe Items
Retrieving Route Parameters
Programmatic Navigation to the Edit Page
One Note about Route Observables
Why do we Need Angular's Help?
Template-Driven (TD) vs Reactive Approach
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: 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
Introduction to the Reactive Approach
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
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
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
Submitting the Recipe Edit Form
Adding a Delete and Clear (Cancel) Functionality
Redirecting the User (after Deleting a Recipe)
Providing the Recipe Service Correctly
Deleting Ingredients and Some Finishing Touches
Introduction & Why Pipes are Useful
Where to learn more about Pipes
Parametrizing a Custom Pipe
Example: Creating a Filter Pipe
Pure and Impure Pipes (or: How to "fix" the Filter Pipe)
Understanding the "async" Pipe
How Does Angular Interact with Backends?
The Anatomy of a Http Request
Using RxJS Operators to Transform Response Data
Using Types with the HttpClient
Showing a Loading Indicator
Using a Service for Http Requests
Services & Components Working Together
Using Subjects for Error Handling
Using the catchError Operator
Observing Different Types of Responses
Changing the Response Body Type
Manipulating Request Objects
Switching Between Auth Modes
Preparing the Signup Request
Sending the Signup Request
Adding a Loading Spinner & Error Handling Logic
Creating & Storing the User Data
Reflecting the Auth State in the UI
Adding the Token to Outgoing Requests
Attaching the Token with an Interceptor
Adding an Alert Modal Component
Understanding the Different Approaches
Preparing Programmatic Creation
Creating a Component Programmatically
Understanding entryComponents
Data Binding & Event Binding
Getting Started with Feature Modules
Splitting Modules Correctly
Adding Routes to Feature Modules
The ShoppingList Feature Module
Understanding Shared Modules
Understanding the Core Module
Adding an Auth Feature Module
Understanding Lazy Loading
Implementing Lazy Loading
Preloading Lazy-Loaded Code
Loading Services Differently
Ahead-of-Time Compilation
What is Application State?
Getting Started with Reducers
Adding Logic to the Reducer
Understanding & Adding Actions
Setting Up the NgRx Store
Preparing Update & Delete Actions
Updating & Deleting Ingredients
Managing More State via NgRx
Removing Redundant Component State Management
Setting Up Auth Reducer & Actions
Auth Finished (For Now...)
And Important Note on Actions
Defining the First Effect
Managing UI State in NgRx
Finishing the Login Effect
Preparing Other Auth Actions
Adding Auto-Login with NgRx
Finishing the Auth Effects
Getting Started with NgRx for Recipes
Fetching Recipe Detail Data
Fetching Recipes & Using the Resolver
Update Delete and Add Recipes
Storing Recipes via Effects
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
Using "fakeAsync" and "tick"
Isolated vs Non-Isolated Tests