Introduction

• What is Angular?
• Installation
• Project Setup and First App
• Working on the First App

Typescript Fundamentals

• Introduction
• Using Types
• Classes
• Interfaces
• Generics
• Modules

Angular Fundamentals

• Structure of an Angular App
• Components
• 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
• 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
• Practicing 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

Working on a Project

• Project Introduction
• Planning the App
• Installing Bootstrap
• Setting up the Application
• Creating the Components
• Using the Components
• Adding a Navigation Bar
• Alternative Non-Collapsable Navigation Bar
• Creating a Model
• Adding Content to the Components
• Outputting a List with ngFor
• Displaying Details

Components & Databinding

• Introduction to Databinding
• 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
• Using Local References in Templates
• @ViewChild() in Angular
• Getting Access to the Template & DOM with @ViewChild
• Projecting Content into Components with ng-content
• Understanding the Component Lifecycle
• Understanding Lifecycle Hooks
• Lifecycle Hooks and Template Access
• @ContentChild() in Angular
• Getting Access to ng-content with @ContentChild

Working on the Project

• Introduction
• Adding Navigation with Event Binding and ngIf
• Passing Data with Property Binding
• Passing Data with Event and Property Binding (Combined)
• Adding FormsModule
• Allowing the User Interaction

Angular Directives

• 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
• Understanding Structural Directives
• Building a Structural Directive
• Understanding ngSwitch
• Building and Using a Dropdown Directive

Services and Dependency Injection

• Introduction to Services
• Creating a Logging Service
• Injecting the Logging Service into Components
• Creating a Data Service
• Understanding the Hierarchical Injector
• Injecting Services into Services
• Using Services for Cross-Component Communication

Working on the Project

• Introduction
• Setting up the Services
• Managing methods in a Service
• Using a Service for Cross-Component Communication
• Adding the List Service
• Using Services for Pushing Data from A to B
• Passing data from one Component to another (via a Service)

Routing

• Introduction
• 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
• Understanding Route Observables
• Passing Query Parameters and Fragments
• Retrieving Query Parameters and Fragments
• Setting up Child (Nested) Routes
• Using Query Parameters
• Configuring the Handling of Query Parameters
• Redirecting and Wildcard Routes
• Redirection Path Matching
• 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

Working on the Project

• 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

Understanding Observables

• Analyzing Angular Observables
• Getting Closer to the Core of Observables
• Building a Custom Observable
• Errors & Completion
• Understanding Operators
• Subjects
• Improving the Reactive Service with Observables (Subjects)

Handling Forms in Angular

• Introduction
• 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
• Built-in Validators & Using HTML5 Validation
• 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
• Practicing Template-Driven 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
• Fixing a Bug
• 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

Working on the Project

• TD: Adding a Form
• Adding Validation to the Form
• Allowing the Selection of Items in the List
• Loading the List Items into the Form
• Updating existing Items
• Resetting the Form
• Allowing the the User to Clear (Cancel) the Form
• Allowing the Deletion of List Items
• Creating the Template for the (Reactive) Edit Form
• Creating the Form For Editing a Component
• Syncing HTML with the Form
• Adding Controls to a Form Array
• Validating User Input
• Submitting the Edit Form
• Adding a Delete and Clear (Cancel) Functionality
• Redirecting the User (after Deleting a Recipe)
• Adding an Image Preview
• Deleting an Item
• Deleting all Items in a FormArray

Using Pipes to Transform Output

• Introduction
• 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
• Understanding the "async" Pipe

Making HTTP Requests - RxJS

• Introduction
• How Does Angular Interact With Backends?
• The Anatomy of a Http Request
• Backend (Firebase) Setup
• Sending a POST Request
• GETting Data
• Using RxJS Operators to Transform Response Data
• Using Types with the HttpClient
• Outputting Posts
• Showing a Loading Indicator
• Using a Service for Http Requests
• Services & Components Working Together
• Sending a DELETE Request
• Handling Errors
• Using Subjects for Error Handling
• Using the catchError Operator
• Error Handling & UX
• Setting Headers
• Adding Query Params
• Observing Different Types of Responses
• Changing the Response Body Type
• Introducing Interceptors
• Manipulating Request Objects
• Response Interceptors
• Multiple Interceptors

Working on the Project

• Introduction
• Backend (Firebase) Setup
• Setting Up the DataStorage Service
• Storing Data
• Fetching Data
• Transforming Response Data
• Resolving Data Before Loading

Authentication & Route Protection

• Introduction
• How Authentication Works
• Adding the Auth Page
• Switching Between Auth Modes
• Handling Form Input
• Preparing the Backend
• Preparing the Signup Request
• Sending the Signup Request
• Adding a Loading Spinner & Error Handling Logic
• Sending Login Requests
• Login Error Handling
• 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 Logout
• Adding Auto-Login
• Adding Auto-Logout
• Adding an Auth Guard

Dynamic Components

• Introduction
• Adding an Alert Modal Component
• Understanding the Different Approaches
• Using ngIf
• Preparing Programmatic Creation
• Creating a Component Programmatically
• Understanding entryComponents
• Data Binding & Event Binding

Angular Modules & Optimizing Angular Apps

• Introduction
• What are Modules?
• Analyzing the AppModule
• Getting Started with Feature Modules
• Splitting Modules Correctly
• Adding Routes to Feature Modules
• Component Declarations
• The ShoppingList Feature Module
• Understanding Shared Modules
• Understanding the Core Module
• Adding an Auth Feature Module
• Understanding Lazy Loading
• Implementing Lazy Loading
• More Lazy Loading
• Preloading Lazy-Loaded Code
• Modules & Services
• Loading Services Differently
• Ahead-of-Time Compilation

Deploying an Angular App

• Introduction
• Deployment Preparation & Steps
• Using Environment Variables
• Deployment Example: Firebase Hosting