Angular 21 - My ASP.NET Application

Angular

Day	Module	Sharing
Course Outline	🔗Outline
Software Installation	🔗Angular Setup Guide
Reading Material	🔗Official Reference 📹Angular 21 Tutorial for Beginners
Useful References	🔗NodeJS Official Site
1	TypeScript and Angular Foundation Overview Environment Setup Basic Syntax Types, Variables and Operators Decision Making and Loops Functions and Arrow Functions Generics Enums Numbers and Strings Arrays Tuples Union and Intersection Types Interfaces, Classes and Objects Type Aliases Modules (ES Modules) Decorators Utility Types Why Angular 21? Angular 21 Key Features Angular CLI Overview Installing and Using Angular 21 Creating the First Angular Project Project Structure Overview Standalone Components Architecture Dependency Injection Overview Change Detection Overview What Is New in Angular 21? What Is a Single Page Application (SPA)? SPA Workflow Traditional Web Application Architecture SPA Advantages SPA Challenges Implementing SPAs Using Angular 21 SPA Using Standalone Components Component-Based Navigation Displaying Components Dynamically Implementing SPA Using Angular Router	Introduction: 🔗Angular 21 — The Most Powerful Version Yet: What’s New & Why It Matters in 2025 🔗Angular 21 Released: What’s New & Developer Guide Type Script: 🔗Type Script Course 🔗TypeScript tutorial in Visual Studio Code 🔗TypeScript Reading material 📝Setup TypeScript Environment 📝Introduction to Single Page Applications.pptx 📝Introduction to Angular 21.pptx 🔗Day1 Project (Trainer Solution)
2	Components, Binding and Forms Introduction to Angular Components Standalone Components Component Metadata and Decorators Templates and Inline Templates Interpolation – Text, Objects and Arrays Component Styling View Encapsulation Integrating External CSS Frameworks Creating Header Component Creating Footer Component Creating Product Component Angular Binding Syntax One-Way Data Binding Property Binding Attribute Binding Event Binding Event Binding Examples Template Reference Variables Two-Way Binding Using ngModel Input and Output Properties Parent–Child Component Communication What Are Directives? Directive Types Built-in Attribute Directives Dynamic Class Binding Dynamic Style Binding Conditional Styling Dynamic Property Binding Controlling Element Visibility Dynamic Image and Hyperlink Binding Introduction to Angular Control Flow Conditional Rendering Using @if Else and Nested Conditions Looping Using @for Tracking Items with track Accessing Index and Context Variables Conditional Switching Using @switch Rendering Templates Dynamically Performance Benefits of Modern Control Flow Overview of Angular Forms Creating a Basic Angular Form Binding Input Fields Accessing Form State Handling Form Submission HTML5 Validation Angular Validation Overview Built-in Validators Validation States Displaying Validation Errors Disabling Submit for Invalid Forms Working with Checkboxes Select (Drop-Down) Fields Date and Number Inputs Radio Buttons Introduction to Reactive Forms Registering Reactive Forms Module Creating FormControl Registering Controls Managing Control Values Creating FormGroup Connecting Model and View Nested Form Groups Updating Form Values Using FormBuilder Built-in Validators Custom Validators Dynamic Forms Using FormArray	Lab Exercises for Angular Project: 🏋️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 Materia 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 🔗Day3 (Sample Solution from Trainer)
3	Services, Signals and HTTP What Is a Service? Creating Services Dependency Injection Fundamentals Injecting Services Service Scopes Using Services in Components Shared Services Optional Dependencies Host Dependencies Introduction to Angular Signals Creating Signals Reading and Updating Signal Values Computed Signals Effect Functions Signal-Based State Management Signals vs Observables Using Signals with Components Signal-based component inputs Signal performance patterns Avoiding unnecessary effects Introduction to RxJS Observables Overview Creating Observables Subscribing and Unsubscribing Common RxJS Operators Subject and BehaviorSubject Async Pipe Interoperability Between Signals and Observables switchMap, mergeMap, concatMap Error handling with catchError takeUntil and memory management Combining streams Angular HTTP Client Overview Setting Up HTTP Client Creating API Services Making HTTP GET Requests HTTP Headers and Options POST, PUT and DELETE Requests Handling HTTP Responses Error Handling Strategies Observables in HTTP Consuming APIs in Components HTTP Interceptors Authentication headers Global error handling Loading indicators Environment configuration
4	Routing, Architecture, and Advanced Angular What Are Pipes? Built-in Pipes Using Pipes in Templates Chaining Pipes Using Pipes in TypeScript Decimal Pipe Currency Pipe Date Pipe Creating Custom Pipes Pure and Impure Pipes Routing Overview Angular Router Architecture Route Configuration Using Standalone APIs Router Outlet Navigation Links Programmatic Navigation Route Parameters Query Parameters Retrieving Route Data Lazy Loading Routes Handling Invalid Routes Route Guards (CanActivate, CanDeactivate) Resolver Preloading strategies Standalone route configuration Nested routes Lifecycle Hooks Overview ngOnInit, ngOnDestroy afterRender hooks (modern APIs) OnPush Change Detection Manual Change Detection Performance implications Local component state Service-based state Signal-based global state When to use RxJS vs Signals? Introduction to NgRx (Conceptual Overview) ng-content Multiple slots ViewContainerRef Dynamic component loading Portals concept	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 🔗Signal Forms in Angular 21 🏋️Angular SVG as Template State Management: 📝Angular State Management 🔗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 HTTP Client: 🏋️Create a Server for Expense REST API 🏋️Angular HTTP GET 🏋️Angular HTTP POST 🏋️Angular HTTP PUT 🏋️Angular HTTP DELETE 🔗HTTP Client 🔗RestAPI Example 🔗AJAX Demo 🔗Day4 (Sample Solution from Trainer)
5	Testing, Performance, Security, and Deployment Testing Strategy Overview Unit Testing Components Testing Services TestBed Mocking Dependencies Testing Reactive Forms Testing HTTP Calls Introduction to E2E Testing Lazy Loading Best Practices Code Splitting OnPush Strategy trackBy Optimization Signals Performance Tuning Avoiding Memory Leaks Bundle Analysis XSS Prevention Angular Sanitization Route Protection Token Storage Strategies CORS Overview Secure HTTP Communication Angular Environments Production Build AOT Compilation Build Optimization Source Maps Debugging Production Issues Build a complete Product Management System Features	Testing: 🏋️Angular Unit Test (Component) 🔗Angular Testing Overview 🔗Testing with Karma and Jasmine 📹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 🔗Testing: Components 🔗Testing: Services 🔗Testing: Pipes Performance: 📝Angular Performance Optimization 🔗Angular Performance Optimization 🔗7 Angular Optimization Secrets That Instantly Boost Performance by 10x 🔗Angular Performance Optimization 🔗Fixing Angular Performance with Zoneless Change Detection 🔗Angular Change Detection Optimization Techniques 🔗Angular 21 vs Older Versions: Performance Comparison 🔗5 Tips to Improve the Load Time of an Angular Application 🔗Struggling with Performance in Angular 21? This One Guard Solves It! 📹Angular 21 Just Killed Your App's Performance (Zoneless vs Zone.js)? 📹From Good to Great: Optimizing Angular Performance 📹Introduction to NgOptimizedImage: Enhancing Performance and UX in Angular Best Practices: 📝Angular Security Best Practices 🔗Performance Best Practeces 🔗Security Best Practeces 🔗Angular Security Best Practices 📹Secure Angular Apps: Defend Against Attacks with Built-In Framework Power 📹Improve Angular Performance with Lazy Loading 📹Angular 21 CanActivate Guard Tutorial: Protect Routes & Implement Authentication Deployment: 📹Deploy an ANGULAR App to AZURE 🔗Day5 (Sample Solution from Trainer)

Recommanded Books
	Title	Learning TypeScript
	ISBN	978-1-098-11033-8
	Author	Josh Goldberg
	Year	2022
	Publisher	O'Reilly Media, Inc.
	Title	TypeScript for Beginners: The Ultimate Guide
	ISBN	978-1-032-06758-2
	Author	Sufyan bin Uzayr
	Year	2022
	Publisher	CRC Press
	Title	Essential TypeScript 4: From Beginner to Pro
	ISBN	978-1-484-27010-3
	Author	Adam Freeman
	Year	2021
	Publisher	Apress
	Title	Mastering TypeScript: Build enterprise-ready, modular web applications using TypeScript 4 and modern frameworks, 4th Edition
	ISBN	978-1-800-56160-1
	Author	Nathan Rozentals
	Year	2021
	Publisher	Packt Publishing Ltd
	Title	The TypeScript Workshop: A practical guide to confident, effective TypeScript programming
	ISBN	978-1-838-82849-3
	Author	Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matthew Thomas Morgan, Wekoslav Stefanovski</i>
	Year	2021
	Publisher	Packt Publishing
	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	Learning Angular: A no-nonsense beginner's guide to building web applications with Angular 10 and TypeScript
	ISBN	978-1-839-21066-2
	Author	Aristeidis Bampakos, Pablo Deeleman
	Year	2020
	Publisher	Packt Publishing
	Title	Angular Projects: Build nine real-world applications from scratch using Angular 8 and TypeScript
	ISBN
	Author	Mohammed, Zama Khan
	Year	2019
	Publisher	Packt Publishing
	Title	Angular Development with TypeScript
	ISBN	978-1-617-29534-8
	Author	Yakov Fain, Anton Moiseev
	Year	2018
	Publisher	Manning Publications
	Title	Getting Started with TypeScript: Includes Introduction to Angular
	ISBN	B01MULZ5FA
	Author	Thomas Claudius Huber
	Year	2017
	Publisher	Amazon Digital Services LLC
	Title	Advanced TypeScript Programming Projects
	ISBN	978-1-789-13304-2
	Author	O'Hanlon, Peter
	Year	2019
	Publisher	Packt Publishing

TypeScript and Angular Foundation

Components, Binding and Forms

Services, Signals and HTTP

Routing, Architecture, and Advanced Angular

Testing, Performance, Security, and Deployment