Step 1 • Before You Start
Prerequisites — TypeScript, RxJS Basics, and HTML/CSS beginner Angular is a TypeScript-first framework — strong TS fundamentals are mandatory. Know: interfaces, classes (constructors, access modifiers), decorators (Angular's entire component system is decorator-based), generics, and TypeScript strict mode. Understand OOP concepts (encapsulation, inheritance, dependency injection pattern). RxJS basics: Observable, subscribe, and at least map/filter/tap before starting. You won't fully understand Angular without these — don't skip them.
8h Step 2 • Setup
Angular CLI and Project Structure beginner The Angular CLI (ng) scaffolds and manages every aspect of an Angular project. Learn ng new (create project), ng serve (dev server with HMR), ng generate component/service/pipe/directive/guard, ng build (production build with optimizations), ng test, and ng lint. Understand the generated project structure — src/app/ (components, services), angular.json (build config), environments/ (env vars), and tsconfig.app.json. Angular uses zone.js for change detection (Angular 16+ also supports zoneless with Signals). Configure the CLI for strict TypeScript and standalone components.
3h Step 3 • Foundations
Components — The Building Blocks beginner Angular components are the UI building blocks — a class decorated with @Component that has a template and styles. Learn: component anatomy (selector, template, styles, changeDetection), component lifecycle hooks (ngOnInit, ngOnChanges, ngOnDestroy, ngAfterViewInit), @Input() for passing data in and @Output() + EventEmitter for emitting events out, ViewChild and ContentChild for accessing child elements, the host element binding with host metadata, and standalone components (Angular 14+ — no NgModule required, import dependencies directly).
7h Step 4 • Foundations
Templates — Directives, Pipes, and Binding beginner Angular templates are HTML with Angular-specific syntax. Learn: interpolation ({{ expression }}), property binding ([src]="imageUrl"), event binding ((click)="handler()"), two-way binding ([(ngModel)] for forms), built-in structural directives (*ngIf → @if, *ngFor → @for, *ngSwitch → @switch — the new control flow syntax from Angular 17), attribute directives (ngClass, ngStyle), template reference variables (#ref), ng-template and ng-container, and built-in pipes (date, currency, number, uppercase, async). Create a custom pipe with @Pipe.
7h Step 5 • Foundations
Pipes and Custom Directives beginner Pipes transform displayed values in templates — DatePipe, CurrencyPipe, AsyncPipe (unwraps Observables/Promises in templates — essential with RxJS), DecimalPipe, LowerCasePipe. Custom pipes: implement PipeTransform, add @Pipe({ name: 'truncate', pure: true }). Pure pipes re-execute only when the input reference changes (default) — impure pipes run on every change detection cycle (use sparingly). Directives extend the DOM without a template. Structural directives change DOM structure: @if, @for (new control flow syntax), legacy *ngIf, *ngFor. Attribute directives change appearance or behaviour: HostListener (listen to DOM events), HostBinding (bind host element properties). Custom directive example: a highlight directive that changes background on mouseenter. Standalone directives (Angular 16+) — no NgModule needed.
4h Step 6 • Foundations
Services and Dependency Injection intermediate Angular's DI system is a core feature. Services are injectable classes (decorated with @Injectable({ providedIn: 'root' })) that hold business logic and shared state. The DI container creates and manages service instances — you declare dependencies in a constructor (constructor(private userService: UserService)) and Angular injects them. Understand the injector hierarchy (root, platform, component), how providedIn: 'root' creates singletons, how component-level providers create scoped instances, and how to mock services in tests with TestBed.overrideProvider().
6h Step 7 • intermediate
Directives — Built-in & Custom intermediate Master Angular's built-in control flow: the new @if / @else, @for (with track expression), and @switch template syntax (Angular 17+), plus legacy *ngIf/*ngFor structural directives. Use built-in attribute directives: NgClass, NgStyle, and NgModel. Write custom attribute directives with @Directive, HostListener (respond to DOM events), and HostBinding (bind to host element properties). Understand the difference between structural and attribute directives and when to use each.
5h Step 8 • Routing
Angular Router — Navigation and Guards intermediate Angular Router enables client-side navigation. Learn: provideRouter() for standalone setup, Routes array (path, component, redirectTo, children), RouterLink and RouterLinkActive directives, RouterOutlet for rendering the active component, route parameters (ActivatedRoute.params, ActivatedRoute.snapshot), query parameters, child routes and nested router-outlets, and route guards (CanActivate, CanDeactivate, CanMatch — functional guards in Angular 15+). Lazy-load feature modules or standalone components with loadComponent() for code splitting. The Router emits navigation events you can listen to.
7h Step 9 • Reactivity
RxJS in Angular — Observables and Operators intermediate Angular is deeply integrated with RxJS — HttpClient returns Observables, Router events are Observables, forms have valueChanges Observables. Essential operators: map, filter, tap, switchMap (cancel previous, use for HTTP), mergeMap (parallel), concatMap (sequential), debounceTime (search input), distinctUntilChanged, catchError, finalize, takeUntilDestroyed (Angular 16+ — auto-unsubscribe). Subjects: Subject, BehaviorSubject (holds current value), ReplaySubject. Always unsubscribe to avoid memory leaks — prefer async pipe over manual subscribe.
RxJS 8h
Step 10 • Data Fetching
HttpClient and Interceptors intermediate Angular's HttpClient is an Observable-based HTTP service. Learn: provideHttpClient() setup, http.get<T>(), http.post(), http.put(), http.delete(), typed response bodies (generic), HttpParams for query strings, HttpHeaders for custom headers, and error handling with catchError and HttpErrorResponse. HTTP Interceptors intercept every request and response — use them for auth (attach JWT tokens), error handling (global toast), loading indicators, and request/response logging. The new functional interceptor syntax (withInterceptors) from Angular 15+.
6h Step 11 • Forms
Reactive Forms and Validation intermediate Angular has two form approaches: Template-driven (simpler, two-way binding with ngModel) and Reactive (FormGroup, FormControl, FormBuilder — explicit, testable, TypeScript-first). Reactive forms are preferred for complex scenarios. Learn: FormBuilder.group(), Validators (required, email, minLength), custom validators (sync and async — checks against an API), nested FormGroups and FormArrays (dynamic fields), form submission, and typed forms (Angular 14+ — strongly typed FormGroup<T>). Use formControlName to bind to reactive form controls in the template.
7h Step 12 • Reactivity
Angular Signals — Modern Reactivity intermediate Angular Signals (introduced in Angular 16, stabilized in 17) are a new reactive primitive that enables fine-grained change detection without zone.js. Understand: signal() for writable state, computed() for derived state, effect() for side effects, input() as a signal-based @Input replacement (Angular 17.1+), output() for events, model() for two-way binding. Signals enable zoneless Angular apps (no zone.js overhead). Signals integrate with RxJS via toSignal() and toObservable() from @angular/core/rxjs-interop. This is the future of Angular reactivity.
6h Step 13 • State Management
State Management with NgRx advanced NgRx implements the Redux pattern for Angular — a single immutable store, actions (events describing what happened), reducers (pure functions that return new state), selectors (memoized state queries), and effects (for side effects like API calls). Learn: Store.dispatch(action), Store.select(selector), createAction, createReducer, on(), createEffect, and createSelector. NgRx DevTools for time-travel debugging. NgRx Signals Store (new, lighter alternative using Angular Signals) is recommended for new projects. Understand when you actually need NgRx vs simpler service-based state.
8h Step 14 • Testing
Testing Angular — Unit and Component Tests intermediate Angular testing uses Jasmine (test syntax) and Karma (test runner), or Jest (faster, recommended for new projects). TestBed is the testing module that creates a micro-Angular environment per test. Learn: TestBed.configureTestingModule(), ComponentFixture, DebugElement queries (By.css), detectChanges() to trigger rendering, TestBed.inject() for services, HttpClientTestingModule for HTTP, RouterTestingHarness for router tests, and fakeAsync/tick for async code. Angular CDK Component Harnesses provide stable, accessible querying for testing Material components. Cypress for E2E.
8h Step 15 • Performance
Performance — Change Detection and Optimization advanced Angular's default change detection checks every component on every event. ChangeDetectionStrategy.OnPush limits checks to when inputs change or an Observable emits — major performance win for large trees. Understand zone.js and how it patches browser APIs to trigger detection. Use trackBy in @for loops (prevents full list re-render). Defer with @defer (lazy render below-the-fold components, built-in to Angular 17+). Lazy load routes. Preload strategies (PreloadAllModules, custom). Analyze bundle size with ng build --stats-json + webpack-bundle-analyzer. Core Web Vitals profiling.
6h Step 16 • SSR
Server-Side Rendering with Angular Universal advanced Angular Universal provides SSR for Angular applications — the Angular team has moved SSR support directly into @angular/ssr (Angular 17+). Learn ng add @angular/ssr, how the server renders the app to HTML, client-side hydration (reusing server-rendered DOM instead of discarding it — Angular 17 incremental hydration), TransferState for passing server data to client without double-fetching, and platform-specific code guards (isPlatformBrowser). Deploy to Node.js servers (Express), Netlify, Vercel, or serverless functions.
7h Step 17 • Production
Production — Build Optimization and Deployment advanced Angular's production build (ng build) includes tree-shaking, minification, and differential loading. Configure environments (environment.ts, environment.prod.ts), enable source maps only in staging, configure proper Content Security Policy headers, set up Sentry for error tracking (@sentry/angular), implement caching with Service Workers (PWA — @angular/pwa), configure asset caching in angular.json, and set up a CI/CD pipeline (GitHub Actions — lint + test + build + deploy). Monitor Core Web Vitals via Google Search Console and real-user monitoring.
6h 