Angular 21 Advanced - My ASP.NET Application

Course Outline	🔗Outline
Software Installation	🔗Angular Setup Guide
Reading Material	📹Angular 21 Tutorial for Beginners
Useful References	🔗Angular 21 Official Reference 🔗NodeJS Official Site
Day	Modules	Sharing
1	From NgModules to Standalone architecture From RxJS-heavy to Signals-first model From Zone.js to zoneless Angular Angular 21 key features and direction Standalone components, directives, and pipes bootstrapApplication and app configuration Route-based architecture design Feature-based folder structure signal(), computed(), effect() Dependency tracking and reactivity model Signal lifecycle and updates Signals vs Observables (usage strategy) @if, @for, @switch syntax @defer for lazy UI loading Signal binding in templates Rendering performance considerations	Notes: 📝Angular Evolution & Modern Mindset 📝Standalone Architecture 📝Signals Fundamentals 📝Modern Templates & Control Flow Slides: 📝Introduction to Single Page Applications 📝Introduction to Angular 21 Lab Exercises for Angular Project: 🏋️Setup TypeScript Environment 🏋️Your first Angular Project 🏋️Your First Standalone Component 🏋️Component Templates & Interaction 🏋️Introducing Signals 🏋️Computed Signals 🏋️Effects Signals 🏋️Angular Material and Header Setup 🏋️Products Grid with Angular Material 🏋️Rendering Lists with Signals and @for 🏋️Passing Data to Child Components with input() 🏋️Conditional Rendering with @if and @else 🏋️Writable Signals for Search State 🏋️Filtering Products with Computed Signals 🏋️Add to Cart with output() 🏋️Creating a Cart Service 🏋️Cart Badge with Computed Signals Your Challenge: By referring to the SVG project: 🏋️Angular SVG as Template Try change the project by adding signals to control the length of the bars on SVG chart
2	Local vs shared state Service-based signal stores Derived state with computed() Managing side effects using effect() When to use Signals vs Observables? Interop: toSignal(), toObservable() Handling async data and streams Lightweight store using Signals Immutable update strategies Domain-based state organization Data flow design Overview of NgRx Signals Store Signal selectors and computed state Handling async operations Migration from traditional NgRx	Notes: 📝Signals in Application Architecture 📝RxJS vs Signals (Modern Strategy) 📝Signal Store Patterns 📝NgRx Signals Store Pipes: 🏋️Angular Pipes Routing: 📝Angular Routing 🏋️Angular Dynamic Route 🏋️Angular Wildcard Route 🏋️Angular Nested Route 🏋️Angular Custom Routing 🏋️Angular Navigation Forms: 📝Angular Forms 🏋️Angular Template Driven Form 🏋️Angular Reactive Forms 🏋️Angular Dynamic Forms 🏋️Angular Form Validation 🏋️Angular Signal Forms State Management: 📝Angular State Management 🏋️Angular 21 NgRx Signal Store 🏋️Angular 21 Local Storage 🔗Taming State in Angular: A Practical Guide to Signals 🔗Angular Signals: The Complete Guide to Modern Reactive State Management 🔗Angular State Management With Signals: A Cleaner Alternative to NgRx 📹Angular State Management using NGRX: How to Setup NGRX store in Angular 📹Angular complete project using NGRX State Management 📹Angular Todo App with Local storage Your Challenge: Create a member registration form using Signal Form to capture following member information: Name Age Gender EMail Password You need to perform the following task: You should consider suitable validations for each of these fileds You also need to create a service to keep every sucessful new member registration Create a route to view all the registered members Optional: Create another version of this project by using NgRx signal store instead of signal service
3	Removing Zone.js Manual vs reactive updates Performance implications Signals vs traditional change detection Minimizing re-renders Component design for performance Memoization using computed() @defer strategies Route-level lazy loading Component-level lazy loading Progressive rendering Angular DevTools (Signals debugging) Identifying bottlenecks Optimizing large component trees	Notes: 📝Zoneless Angular 📝Fine-Grained Rendering 📝Deferred & Lazy Rendering 📝Performance Profiling Testing: 🏋️Angular 21 Unit Test Component (Karma and Jasmine) 🔗Testing: Components 🔗Angular Testing Overview 🔗Testing with Karma and Jasmine 📹Angular Unit Testing \| Components & Services Explained \| Jasmine & Karma 🏋️Angular 21 Unit Test Service (vitest) 🔗Testing: Services 🏋️Angular 21 Unit Test Pipe (vitest) 🔗Testing: Pipes 📹Angular Unit Testing Made Easy: A Comprehensive Introduction 📹Angular Unit Testing Made Easy: A Comprehensive Guide to Component Testing 📹Angular Unit Testing Made Easy: Comprehensive Guide to HTTP Testing Performance: 📝Angular Performance Optimization 🔗7 Angular Optimization Secrets That Instantly Boost Performance by 10x 📹Angular 21 Just Killed Your App's Performance (Zoneless vs Zone.js)? 📹Introduction to NgOptimizedImage: Enhancing Performance and UX in Angular 📹From Good to Great: Optimizing Angular Performance 🔗Angular Change Detection Optimization Techniques 🔗Angular Performance Optimization 🔗Struggling with Performance in Angular 21? This One Guard Solves It! 🔗Angular Performance Optimization 🔗Fixing Angular Performance with Zoneless Change Detection 🔗Angular 21 vs Older Versions: Performance Comparison 🔗5 Tips to Improve the Load Time of an Angular Application 🏋️Angular 21 Deferrable Views (@defer) 📹Angular 21 @defer Explained: Lazy Loading Like a Pro \| on viewport & prefetch on idle Full Demo 🏋️Angular 21 Lazy Loading 📹Implementing Lazy Loading 📹Learn about routers with Standalone Components \| Lazy Load Standalone Components 📹Lazy Loading with Standalone Components 📹Improve Angular Performance with Lazy Loading 🔗Performance Best Practeces 🏋️Angular 21 DevTools 📹Angular DevTools 101: Debugging and Profiling Angular Applications 📹New in Angular 21: Signals Formatter for Browser DevTools 📹New in Angular DevTools: Dependency Highlighting in Signal Graph Your Challenge: Use DevTools to analyse project#17 "Cart Badge with Computed Signals" from Day 1
4	Angular SSR architecture Hydration and pre-rendering Signals behavior in SSR Avoiding SSR pitfalls HTTP integration with Signals Interceptors (auth, logging, errors) Error handling strategies Caching and retry patterns Angular Elements with standalone components Using Signals in Web Components Integration with non-Angular systems Feature-based architecture Domain boundaries and separation Code reuse and shared libraries Optional: Nx monorepo strategy Optional: Microfrontend concepts	Notes: 📝SSR & Hydration 📝API Integration & Data Layer 📝Web Components Integration 📝Enterprise Architecture Patterns SSR: 🏋️Angular 21 SSR HTTP Client: 📝Micro Services 🏋️Create a RestAPI Server using NodeJS Express Framework 🏋️Create a RestAPI Server using MySQL 🏋️Angular HTTP GET 🏋️Angular HTTP POST 🏋️Angular HTTP PUT 🏋️Angular HTTP DELETE 🔗HTTP Client 🔗RestAPI Example 🔗AJAX Demo 🏋️Angular 21 Web Components Integration Your Challenge: Complete the store project from day 1 (Continue from exercises #17). The complete application should perform the following All the products are from database system (MySQL for example) Allow user to add item to cart Allow user to delete item from cart Allow user to visit the cart before commit perchasing Allow user to clear the cart Up on commit sucessful purchasing, the inventory in product will be updated (Ignore transactional handling issue at the moment) Design routing to handle each of these tasks

Course Outline

🔗Outline

Software Installation

🔗Angular Setup Guide

Reading Material

📹Angular 21 Tutorial for Beginners

Useful References

Day

Modules

Sharing

From NgModules to Standalone architecture
From RxJS-heavy to Signals-first model
From Zone.js to zoneless Angular
Angular 21 key features and direction

Standalone components, directives, and pipes
bootstrapApplication and app configuration
Route-based architecture design
Feature-based folder structure

signal(), computed(), effect()
Dependency tracking and reactivity model
Signal lifecycle and updates
Signals vs Observables (usage strategy)

@if, @for, @switch syntax
@defer for lazy UI loading
Signal binding in templates
Rendering performance considerations

Notes:

Slides:

Lab Exercises for Angular Project:

Your Challenge:

By referring to the SVG project:

🏋️Angular SVG as Template

Try change the project by adding signals to control the length of the bars on SVG chart

Local vs shared state
Service-based signal stores
Derived state with computed()
Managing side effects using effect()

When to use Signals vs Observables?
Interop: toSignal(), toObservable()
Handling async data and streams

Lightweight store using Signals
Immutable update strategies
Domain-based state organization
Data flow design

Overview of NgRx Signals Store
Signal selectors and computed state
Handling async operations
Migration from traditional NgRx

Notes:

Pipes:

🏋️Angular Pipes

Routing:

Forms:

State Management:

Your Challenge:

Create a member registration form using Signal Form to capture following member information:

Name
Age
Gender
EMail
Password

You need to perform the following task:

You should consider suitable validations for each of these fileds
You also need to create a service to keep every sucessful new member registration
Create a route to view all the registered members
Optional: Create another version of this project by using NgRx signal store instead of signal service

Removing Zone.js
Manual vs reactive updates
Performance implications

Signals vs traditional change detection
Minimizing re-renders
Component design for performance
Memoization using computed()

@defer strategies
Route-level lazy loading
Component-level lazy loading
Progressive rendering

Angular DevTools (Signals debugging)
Identifying bottlenecks
Optimizing large component trees

Notes:

Testing:

Performance:

Your Challenge:

Use DevTools to analyse project#17 "Cart Badge with Computed Signals" from Day 1

Angular SSR architecture
Hydration and pre-rendering
Signals behavior in SSR
Avoiding SSR pitfalls

HTTP integration with Signals
Interceptors (auth, logging, errors)
Error handling strategies
Caching and retry patterns

Angular Elements with standalone components
Using Signals in Web Components
Integration with non-Angular systems

Feature-based architecture
Domain boundaries and separation
Code reuse and shared libraries
Optional: Nx monorepo strategy
Optional: Microfrontend concepts

Notes:

SSR:

🏋️Angular 21 SSR

HTTP Client:

Your Challenge:

Complete the store project from day 1 (Continue from exercises #17).
The complete application should perform the following

All the products are from database system (MySQL for example)
Allow user to add item to cart
Allow user to delete item from cart
Allow user to visit the cart before commit perchasing
Allow user to clear the cart
Up on commit sucessful purchasing, the inventory in product will be updated (Ignore transactional handling issue at the moment)

Design routing to handle each of these tasks

Recommanded Books
	Title	Modern Angular: Also covers signals, standalone, SSR, zoneless, and more
ISBN	978-1-633-43692-3
Author	Armen Vardanyan
Year	2025
Publisher	Manning Publications
	Title	Reactive Patterns with RxJS and Angular Signals: Elevate your Angular 18 applications with RxJS Observables, subjects, operators, and Angular Signals
ISBN	978-1-835-08770-1
Author	Lamis Chebbi
Year	2024
Publisher	Packt Publishing

Recommanded Books

Title

Modern Angular: Also covers signals, standalone, SSR, zoneless, and more

ISBN

978-1-633-43692-3

Author

Armen Vardanyan

Year

2025

Publisher

Manning Publications

Title

Reactive Patterns with RxJS and Angular Signals: Elevate your Angular 18 applications with RxJS Observables, subjects, operators, and Angular Signals

ISBN

978-1-835-08770-1

Author

Lamis Chebbi

Year

2024

Publisher

Packt Publishing