Day 1 — Your First Angular 20 App (From Zero to Hero)
Start your Angular journey. Install the CLI, create your first standalone app, and master Signals on Day 1.
Day 2 — Mastering Angular Components, Templates & Data Binding
Dig into the heart of Angular: Components, Templates, Data binding, Events, Signals, and Inputs & Outputs.
Day 3 — Mastering Directives in Angular (ngIf, ngFor, ngSwitch + Custom Directives)
Master structural and attribute directives to control your DOM logic.
Day 4 — Angular Routing, Navigation, Route Params, Guards & Lazy Loading
Master Angular routing: create pages, extract parameters, use signals, and lazy-load components.
Day 5 — HTTP, Services, REST APIs, CRUD & Signals
Learn to use HttpClient, built custom Signal-based services, and implement a full CRUD API.
Day 6 — Angular Forms: Template Forms, Reactive Forms, Validation & Signals
Master Angular Forms: Build Template-Driven and Reactive Forms with custom validation.
Day 7 — Angular Signals: writable(), computed(), effect(), Stores & Real App Implementation
Deep dive into Signals: writable, computed, effect, and how to build a signal-based shopping cart store.
Day 8 — Authentication, JWT, Guards, Interceptors & Auth Store
Build real-world Authentication: Login, JWT handling, Protected Routes, and AuthGuards.
Day 9 — Angular Material & UI Mastery
Build professional UIs with Angular Material: Cards, Dialogs, Data Tables, and Side Navigation.
Day 10 — Angular Pipes: Formatting, Transforming & Custom Pipes
Master built-in pipes (Date, Currency, Async) and learn to build powerful Custom Pipes.
Day 11 — Angular Lifecycle Hooks Deep Dive
Understand the Angular Lifecycle: ngOnInit, ngOnDestroy, ngAfterViewInit, and DestroyRef.
Day 12 — Reusable Components: Content Projection & ViewChild Deep Dive
Learn Content Projection (ng-content) and ViewChild to build generic, reusable UI components.
Day 13 — RxJS Basics: Observables, Subjects & Operators
Introduction to Reactive Programming with RxJS: Observables, Subscriptions, Pipeable Operators, and Subjects.
Day 14 — Advanced RxJS: switchMap, mergeMap, forkJoin & CatchError
Advanced RxJS patterns: Higher-order mapping operators and robust error handling.
Day 15 — Angular Performance Optimization: OnPush, @defer & Lazy Loading
Optimize Angular apps with OnPush, @defer, NgOptimizedImage, and lazy loading.
Day 16 — State Management with NgRx SignalStore
Master modern state management with NgRx SignalStore: State, Computed properties, Methods, and RxJS integration.
Day 17 — Unit Testing in Angular: Jasmine, Karma & Spies
Learn Unit Testing: Jasmine, Karma, Spies, and testing Components, Services, and Signals.
Day 18 — Custom Directives Attribute, Structural & Composition
Build Attribute Directives, Structural Directives (*appRole), and use the Directive Composition API.
Day 19 — Deployment: Build for Production, Firebase, Vercel & Netlify
Build and deploy Angular apps to Firebase, Vercel, and Netlify with environment management.
Day 20 — Angular SSR: Server-Side Rendering & SEO Mastery
Enable SSR and Hydration for SEO mastery with @angular/ssr.
Day 21 — Angular Animations & Transitions
Create complex animations: fade ins, list staggering, and keyframes with Angular Animations.
Day 22 — Progressive Web Apps (PWA): Offline Support & Installation
Convert your Angular app into an installable PWA with offline capabilities.
Day 23 — Dynamic Components: Rendering at Runtime
Learn to render components dynamically using ViewContainerRef and ngComponentOutlet.
Day 24 — Angular Elements: Exporting to Web Components
Export Angular components as standard Web Components using Angular Elements.
Day 25 — Nx Monorepos: Enterprise Angular Architecture
Scale your Angular development with Nx Monorepos, shared libraries, and affected commands.
Day 26 — Quality Assurance: Strict Mode, ESLint, Prettier & Husky
Enforce code quality with Angular Strict Mode, ESLint, Prettier, Husky, and GitHub Actions.
Day 27 — Micro-Frontends: Scalable Architecture with Module Federation
Split monoliths into independent Micro-Frontends using Angular and Module Federation.
Day 28 — Advanced CLI: Custom Schematics & Builders
Create custom Angular CLI Schematics and Builders to automate tasks and standardize code.
Day 29 — Capstone Project Part 1: Architecture, Store & Drag-and-Drop
Start the final Kanban Board project: Architecture, NgRx SignalStore, and Angular CDK Drag-and-Drop.
Day 30 — Capstone Project Part 2 features, Polish & Final Deployment
Complete the Kanban Board with Angular Material Dialogs, Search Filters, and Production Build.