Angular Mastery
Master Angular — components, directives, services, RxJS, NgRx, signals, and enterprise patterns. 16 phases from fundamentals to production apps.
Your Progress
Complete all 16 phases to master this track
Master Angular — components, directives, services, RxJS, NgRx, signals, and enterprise patterns. 16 phases from fundamentals to production apps.
Phase 1: Scaffolding Your First Angular App
Install the toolchain, generate a project, and run it locally to understand the workspace layout.
Installing the Angular CLI
Install the global CLI package and confirm your Node runtime version.
Generating a Project with ng new
Create a fresh workspace with routing, stylesheet, and strictness options.
Running the Dev Server
Serve the app locally with live reload while you edit files.
Reading the Generated Project Structure
Identify the role of src, angular.json, and tsconfig files.
Building for Production
Produce an optimized build output ready for any static host.
Phase 2: TypeScript Refresher for Angular
Refresh the TypeScript features that Angular templates, services, and decorators depend on daily.
Types, Interfaces, and Unions
Describe data shapes so inputs and payloads are checked at compile time.
Classes and Decorator Syntax
Write class-based code that Angular decorators can attach metadata to.
Generics and Utility Types
Keep type information flowing through functions, services, and helpers.
Async Patterns: Promises and Observables
Compare one-shot promises with multi-value observable streams.
Phase 3: Components, Templates, and Lifecycle
Build reusable components that pass data in, emit events out, and react to lifecycle stages.
Passing Data with @Input
Accept values from a parent template, including signal-based inputs.
Emitting Events with @Output
Notify parent components of user actions through typed events.
Interpolation and Property Binding
Render dynamic values and bind to DOM properties in templates.
Component Lifecycle Hooks
Hook into initialization, change detection, and teardown stages.
Parent-Child Communication Patterns
Coordinate components through inputs, outputs, projection, and services.
Phase 4: Bindings, Structural Directives, and Events
Control markup with property bindings, event handlers, and directives that add or remove elements.
Property and Attribute Binding
Bind expressions to DOM properties and special attributes.
Event Binding and Template Statements
Respond to clicks, submits, and keyboard events in the template.
Two-Way Binding with ngModel
Sync a component field with an input using banana-in-a-box syntax.
Structural Directives: ngIf, ngFor, ngSwitch
Add or remove elements based on conditions and collections.
Custom Attribute Directives
Create directives that change element behavior and appearance.
Phase 5: Services and Dependency Injection
Organize logic in injectable services and let the Angular injector construct and share them.
Providing and Injecting Services
Register a service once and resolve it wherever it is needed.
Providers, Tokens, and multi Providers
Configure how the injector produces values for abstract tokens.
Hierarchical Injectors
Scope service instances to components or keep them application-wide.
Service Patterns for State and Side Effects
Put shared state and side-effect logic into well-shaped services.
Phase 6: Pipes and Component Styling
Transform values in templates with pipes and scope CSS to components with encapsulation.
Built-in Pipes
Format dates, numbers, currencies, and async values in templates.
Writing Custom Pipes
Create a reusable transform function registered under a pipe name.
Pure vs Impure Pipes
Choose pipe purity carefully to avoid wasted recalculation.
Scoped Styling and View Encapsulation
Keep CSS local to a component and control when it leaks.
Global Styles and Theming
Load document-level CSS and define shared theme variables.
Phase 7: Reactive Forms and Validation
Model complex forms with FormGroup, apply validators, and surface validation state to users.
Building Forms with FormBuilder
Declare a typed form model in the component class.
Built-in and Custom Validators
Attach validation rules and write your own validator functions.
Dynamic Fields with FormArray
Add and remove repeating rows of inputs at runtime.
Observing Form State and Submitting
Use dirty, touched, and valid flags to drive validation messages.
Nested Groups and Model Mapping
Mirror nested API objects with grouped form controls.
Phase 8: Routing and Navigation Guards
Map URLs to views, read route parameters, lazy-load features, and protect navigation with guards.
Configuring Routes
Declare routes and wire the router into the application bootstrap.
Route Parameters and Query Params
Read dynamic segments and query strings from the current navigation.
Guards and Resolvers
Block, redirect, or prefetch before a route activates.
Lazy Loading Feature Routes
Defer feature code until the user first navigates to it.
Listening to Router Events
React to navigation lifecycle events across the application.
Phase 9: HTTP Client and Interceptors
Fetch data from APIs, handle failures gracefully, and attach headers through reusable interceptors.
Requesting Data with HttpClient
Make typed GET requests and consume the response as an Observable.
POST, PUT, and DELETE Requests
Send bodies, headers, and query parameters to your API.
Error Handling with catchError
Intercept failed responses and recover with fallback data.
HTTP Interceptors
Wrap every request to add auth headers, logging, or retries.
Testing HTTP with HttpTestingController
Assert outgoing requests without touching the network.
Phase 10: RxJS Operators for Angular
Compose asynchronous event streams with creation functions, transformation operators, and Subjects.
Observables and Subscriptions
Create streams, subscribe to them, and clean up correctly.
map, filter, and reduce Operators
Reshape and narrow emissions as they flow through a pipe.
switchMap, mergeMap, and combineLatest
Flatten inner observables and join multiple sources together.
Subjects and BehaviorSubjects
Multicast events from services to multiple subscribers.
Error Handling and Retry Patterns
Keep streams alive when a source fails transiently.
Phase 11: Signals and Change Detection
Adopt signals for fine-grained reactivity and tune change detection with OnPush and defer blocks.
Creating and Updating Signals
Hold reactive values with signal, set, and update.
Effects and Dependency Tracking
Run side effects whenever tracked signal values change.
Signal Inputs and Outputs
Declare reactive component APIs without decorator boilerplate.
Change Detection Strategies
Compare default detection with the OnPush strategy.
Deferred Loading with @defer
Load heavy template content only when a trigger fires.
Phase 12: NgRx State Management
Model application state with a single store, pure reducers, selectors, and side-effectful effects.
Actions and the Store
Dispatch plain action objects that describe what happened.
Reducers and Immutability
Produce the next state with pure reducer functions.
Selectors for Reading State
Derive and memoize slices of state for components.
Effects for Side Effects
Move HTTP calls and other side effects out of components.
Entity State and Adapter APIs
Normalize collections into id-keyed maps for fast lookups.
Phase 13: Testing Angular Applications
Write unit tests for components and services, then cover critical flows with end-to-end tests.
Unit Testing with Jasmine
Structure specs with describe, it, and expect matchers.
Testing Components with TestBed
Render a component in isolation and assert its DOM output.
Testing Services and Async Data
Verify service logic with doubles and controlled async timing.
End-to-End Testing
Cover real user journeys through routes, forms, and APIs.
Testing Pipes, Guards, and Interceptors
Unit-test the small units that surround your components.
Phase 14: Server-Side Rendering and PWA
Render pages on the server for faster first paint and ship an installable, offline-capable app.
Adding Server-Side Rendering
Enable Angular SSR and hydrate the server-rendered HTML.
Transferring State to the Client
Embed server-fetched data to avoid duplicate client requests.
Service Workers and Offline Support
Cache static assets and API responses for offline visits.
Web App Manifest and Install Prompt
Declare icons and display mode so the app can be installed.
SEO and Social Meta Tags
Emit crawlable HTML and dynamic head tags for sharing.
Phase 15: Performance Optimization and Lazy Loading
Measure and shrink bundles, defer heavy work, and keep large lists responsive under load.
Code Splitting and Chunk Strategy
Split features into separate bundles loaded on demand.
Efficient List Rendering with trackBy
Preserve DOM nodes across collection updates.
Profiling Change Detection
Find components that re-render too often during interactions.
Optimizing Images and Assets
Cut transfer weight from static media files.
Measuring Core Web Vitals
Track loading and responsiveness metrics in the field.
Phase 16: Enterprise Patterns and Capstone
Structure a large codebase with scalable patterns and deliver a production-ready capstone application.
Feature Folders and Standalone Patterns
Organize code by feature instead of by technical type.
Facades and Smart/Dumb Components
Separate data-fetching containers from presentational views.
Shared Libraries and Monorepo Layout
Extract reusable code into buildable workspace libraries.
Incremental Migration and Version Upgrades
Adopt new APIs and major versions without a big-bang rewrite.
Capstone: Production Angular Application
Assemble routing, forms, HTTP, and state into one deployable app.