Angular

Advanced

The batteries-included enterprise web framework. Master TypeScript-first components, services, dependency injection, and modern Signals.

Requires:JavaScript TypeScript

0 / 42 lessons

Lessons

42

Complete to finish this stage

Est. time

33h

At a comfortable pace

Difficulty

Advanced

For complete beginners

Why Angular Matters

Angular is Google's flagship enterprise framework. Engineered with TypeScript from the ground up, Angular combines standalone components, fine-grained Signals reactivity, a two-tiered hierarchical Dependency Injection system, reactive forms, client-side routing, and hybrid Server-Side Rendering (SSR) into a unified platform.

Curriculum Overview

This master curriculum spans 3 difficulty tiers across 42 comprehensive lessons:

Level 1 — Beginner (Lessons 1–13): Angular Fundamentals, TypeScript foundations, Standalone Components, Templates & Data Binding, Modern Control Flow (@if, @for, @switch), Signals, Component Communication (input(), output(), model()), Services & DI (inject()), Routing, Forms, HTTP, Styling, and 7 Beginner Projects.
Level 2 — Intermediate (Lessons 14–25): Advanced Components & Render Hooks (afterNextRender), Advanced Signals & computed(), RxJS & Stream Pipelines, Advanced Functional Guards & Resolvers, Advanced DI & InjectionToken, HTTP Interceptors, State Management (@ngrx/signals SignalStore), Typed Reactive Forms & ControlValueAccessor, Unit & E2E Testing (Vitest & Playwright), Angular CLI Schematics & Budgets, Accessibility (WCAG 2.2 & Angular CDK), and 8 Intermediate Projects.
Level 3 — Advanced (Lessons 26–42): Angular Internals (Ivy, LView/TView), Change Detection & Zoneless Angular, Push-Pull Reactivity & Graph Theory, SSR & Non-Destructive Hydration with Event Replay, Performance Engineering & Core Web Vitals, Advanced @defer, Angular CDK Headless Primitives, Domain-Driven Large-Scale Architecture, Nx Monorepos, Micro-Frontends & Module Federation, Enterprise Security (OAuth 2.0 PKCE, CSP, Trusted Types), Production Observability & Sentry RUM, CI/CD Pipelines, Advanced Contract & Visual Regression Testing, Custom Angular Libraries (ng-packagr), Advanced TypeScript Meta-Programming, and 3 Senior Capstone Projects.

Stage progress0%

Angular lessons

42 lessons · follow them in order for best results.

Angular Fundamentals & ArchitectureMaster core Angular concepts: platform architecture, Angular vs AngularJS, CLI tools, modern standalone workspace structure, configuration files, and build pipelines.Beginner 35 min Level 1 — Beginner TypeScript Fundamentals for AngularMaster essential TypeScript features powering modern Angular: interfaces, type aliases, enums, generics, access modifiers, union types, and type narrowing.Beginner 35 min Level 1 — Beginner Components & Standalone ArchitectureMaster Angular components: metadata, templates, styles, selectors, standalone components, lifecycle hooks, and smart/dumb component composition.Beginner 40 min Level 1 — Beginner Templates & Data BindingMaster Angular template syntax: interpolation, property binding, event binding, two-way binding, template expressions, and template reference variables.Beginner 35 min Level 1 — Beginner Modern Control Flow (@if, @for, @switch)Master modern built-in control flow in Angular: @if, @else if, @else, @for with mandatory track expressions, @empty blocks, @switch, and performance advantages.Beginner 35 min Level 1 — Beginner Angular Signals & Fine-Grained ReactivityMaster Angular Signals: signal(), reading and updating values, set(), update(), computed signals, side effects with effect(), and glitch-free reactivity guarantees.Beginner 40 min Level 1 — Beginner Component Communication & Data FlowMaster communication between Angular components: signal inputs (input, input.required), output events (output()), model inputs for two-way binding, and shared state patterns.Beginner 35 min Level 1 — Beginner Services & Dependency InjectionMaster Angular Services and Dependency Injection (DI): @Injectable, providedIn: Beginner 40 min Level 1 — Beginner Angular Router & NavigationMaster the Angular Router: route definitions, router outlet, routerLink directives, navigation, route parameters with component input binding, child routes, and redirects.Beginner 40 min Level 1 — Beginner Angular Forms: Reactive & Template-DrivenMaster Angular Forms: Reactive Forms vs Template-Driven forms, FormControl, FormGroup, FormArray, built-in validation, custom validators, and state inspection.Beginner 45 min Level 1 — Beginner HTTP Client & Data FetchingMaster Angular HttpClient: provideHttpClient, typed GET/POST/PUT/DELETE operations, request headers, query parameters, response handling, and error catching.Beginner 40 min Level 1 — Beginner Styling & Component EncapsulationMaster styling in Angular: component styles, global styles, View Encapsulation modes (Emulated, ShadowDom, None), SCSS features, Angular Material, and Tailwind CSS.Beginner 35 min Level 1 — Beginner Beginner Projects & Practical LabsConsolidate Level 1 Angular skills with 7 hands-on beginner projects: Todo app with Signals, Weather forecast app, Markdown notes, Blog, Product catalog, and Auth UI.Beginner 60 min Level 1 — Beginner Advanced Components, Lifecycle & QueriesMaster advanced Angular component capabilities: lifecycle hooks (ngOnInit, ngOnDestroy, afterNextRender), content projection (<ng-content>), view queries (viewChild, viewChildren), and dynamic component instantiation.Intermediate 45 min Level 2 — Intermediate Advanced Signals, Computed State & RxJS InteropMaster advanced Angular Signals: derived state graphs, signal inputs and outputs, model signals, equality comparison functions, untracked reads, and RxJS interop with toSignal and toObservable.Intermediate 45 min Level 2 — Intermediate RxJS & Reactive Programming in AngularMaster RxJS in Angular: Observables, Observers, Subscriptions, pipeable operators (map, filter, switchMap, mergeMap, concatMap, exhaustMap, debounceTime), Subjects, and memory leak prevention.Intermediate 50 min Level 2 — Intermediate Advanced Routing, Guards & ResolversMaster advanced Angular routing: lazy-loaded standalone components and children, functional route guards (canActivate, canDeactivate), functional resolvers, route data, and preloading strategies.Intermediate 45 min Level 2 — Intermediate Advanced Dependency Injection & ProvidersMaster advanced Dependency Injection in Angular: hierarchical injectors (Element vs Environment), InjectionToken, provider types (useClass, useValue, useFactory, useExisting), multi-providers, and custom scopes.Intermediate 45 min Level 2 — Intermediate HTTP Architecture & InterceptorsMaster Angular HTTP architecture: functional HTTP interceptors (HttpInterceptorFn), auth token injection, global error handling, retry with exponential backoff, caching, and HttpContext.Intermediate 45 min Level 2 — Intermediate State Management: Signals, NgRx & SignalStoreMaster state management in Angular: local vs shared state, Signal-based store patterns, NgRx Store (Actions, Reducers, Selectors, Effects), and modern @ngrx/signals SignalStore.Intermediate 50 min Level 2 — Intermediate Advanced Forms & ControlValueAccessorMaster advanced Angular Reactive Forms: strongly typed FormGroups, dynamic FormArrays, nested form architectures, async validators, cross-field validation, and custom inputs with ControlValueAccessor.Intermediate 50 min Level 2 — Intermediate Testing Angular: Unit, Integration & E2EMaster modern Angular testing: unit testing with Jasmine/Jest/Vitest, TestBed configuration, testing Signals and Standalone Components, service mocking with spies, and E2E testing with Playwright.Intermediate 50 min Level 2 — Intermediate Angular CLI, Build Optimization & SchematicsMaster Angular CLI & build tooling: schematics, custom code generators, angular.json configuration, ESBuild and Vite pipelines, environment variables, and bundle size analysis.Intermediate 40 min Level 2 — Intermediate Web Accessibility (a11y) & Angular CDKMaster accessibility (a11y) in Angular: WCAG 2.2 standards, semantic HTML, ARIA landmarks, focus management (FocusTrap, FocusKeyManager), and the Angular CDK Accessibility module.Intermediate 40 min Level 2 — Intermediate Intermediate Projects & Enterprise LabsConsolidate Level 2 Angular mastery with 8 practical enterprise projects: E-Commerce Storefront, CRM Portal, Kanban Board, Real-Time Chat, Analytics Dashboard, and Checkout Wizard.Intermediate 60 min Level 2 — Intermediate Angular Internals, Ivy & Runtime ArchitectureMaster Angular internals: template compilation pipeline, Ivy rendering engine, runtime data structures (LView, TView, LNode, TNode), view tree mechanics, and compiler optimizations.Advanced 55 min Level 3 — Advanced Change Detection, OnPush & Zoneless AngularMaster Angular Change Detection: Zone.js monkey-patching mechanics, ChangeDetectionStrategy.OnPush, Signal-driven micro-updates, ChangeDetectorRef, and Zoneless Angular architectures.Advanced 55 min Level 3 — Advanced Angular Reactivity & Signal Graph TheoryMaster advanced Angular reactivity: push-pull reactivity algorithms, dirty marking and dynamic dependency tracking in signal graphs, glitch freedom, and avoiding reactive loops.Advanced 50 min Level 3 — Advanced Server-Side Rendering (SSR), Hydration & SSGMaster Angular rendering modes: Client-Side Rendering (CSR), Server-Side Rendering (SSR with @angular/ssr), Static Site Generation (SSG), Non-Destructive Hydration, and Event Replay.Advanced 55 min Level 3 — Advanced Performance Engineering & Core Web VitalsMaster Angular performance engineering: Core Web Vitals (LCP, INP, CLS), NgOptimizedImage, route-level and component-level code splitting, virtual scrolling, and memory profiling.Advanced 50 min Level 3 — Advanced Advanced Deferrable Views (@defer)Master Angular Deferrable Views (@defer): deferred sub-blocks (@placeholder, @loading, @error), triggers (on viewport, on interaction, on hover, on idle, on timer), prefetching strategies, and bundle splitting.Advanced 45 min Level 3 — Advanced Angular CDK: Headless UI PrimitivesMaster the Angular Component Development Kit (CDK): Overlay, Dialog, Portals, Drag and Drop (CdkDrag, CdkDropList), Virtual Scrolling, and building custom design systems.Advanced 50 min Level 3 — Advanced Large-Scale Enterprise Architecture & DDDMaster large-scale enterprise Angular architecture: Feature-Driven modular structure, Domain-Driven Design (DDD), bounded contexts, Smart/Dumb component separation, and API abstraction facades.Advanced 55 min Level 3 — Advanced Nx & Enterprise Monorepo ArchitectureMaster Nx monorepos for Angular: workspace architecture, apps vs libs, project dependency graphs, computation caching (local and remote), affected commands, and CI optimization.Advanced 50 min Level 3 — Advanced Micro-Frontends & Module FederationMaster micro-frontends in Angular: Module Federation architecture, Host (Shell) and Remote application configuration, runtime integration, shared singleton dependencies, and cross-application communication.Advanced 55 min Level 3 — Advanced Enterprise Security, OAuth 2.0 & XSS HardeningMaster enterprise Angular security: OAuth 2.0 and OpenID Connect with PKCE flow, RBAC/PBAC authorization, Cross-Site Scripting (XSS) prevention, DomSanitizer, Content Security Policy (CSP), and Trusted Types.Advanced 55 min Level 3 — Advanced Production Observability, Monitoring & RUMMaster production observability in Angular: custom Global ErrorHandler, Sentry and Datadog integration, Real User Monitoring (RUM), Core Web Vitals telemetry, and structured logging.Advanced 50 min Level 3 — Advanced CI/CD Pipelines, Budgets & Release AutomationMaster enterprise CI/CD for Angular: GitHub Actions workflows, automated linting and type checking, unit and E2E pipelines, bundle size budgets, preview deployments, and canary releases.Advanced 50 min Level 3 — Advanced Advanced Testing: Visual Regression & Contract TestingMaster advanced Angular testing strategies: Testing Library Angular (@testing-library/angular), Visual Regression testing with Playwright, API Contract Testing with Pact, and flaky test mitigation.Advanced 50 min Level 3 — Advanced Custom Angular Libraries & npm PackagingMaster building custom Angular libraries: ng-packagr, Angular Package Format (APF), public API design (public-api.ts), semantic versioning (SemVer), npm publishing, and Storybook documentation.Advanced 50 min Level 3 — Advanced Advanced TypeScript for Angular ArchitectsMaster advanced TypeScript patterns for Angular: complex generics, conditional types, mapped types, template literal types, discriminated unions for state modeling, and strict compiler flags.Advanced 50 min Level 3 — Advanced Senior Angular Projects & Mastery BlueprintMaster senior-level enterprise Angular architecture through 3 production-grade capstone projects: Global E-Commerce, Multi-Tenant SaaS Platform, Accessible Design System, and the Senior Architect Blueprint.Advanced 75 min Level 3 — Advanced