Angular Complete Masterclass (50 Chapters, 17 Phases)
📌 Covered in this course:
What is Angular? · Prerequisites · Setup & CLI · Project Structure · Your First Component · Templates & Interpolation · Data Binding · Conditions & Loops · Component Inputs & Outputs · Content Projection · Directives · Pipes & Custom Pipes · Signals & Computed · Services & DI · Router & Guards · Forms & Reactive Forms · HttpClient & Interceptors · RxJS & toSignal · State Management & NgRx · Material & Security · Testing, SSR, Projects & Quiz
Welcome to Our Compiler's Angular Complete Master Course. Angular is the enterprise TypeScript-based web framework used to build structured, scalable single-page applications. This comprehensive 50-chapter bootcamp guides you through standalone components, Angular Signals, modern control flow, reactive forms, router navigation, dependency injection, RxJS HTTP requests, testing, and production deployment.
🎯 Ready to Master Angular Web Engineering?
Choose where to start: explore Angular introduction, inputs/outputs, Signals, services, router, reactive forms, or platform API project:
📚 Master Course Curriculum
Phase 01
Angular Basics
01
1. What is Angular?
Angular ante enti? · Angular enduku use chestaru? · Angular vs JavaScript · Angular vs React · Angular vs Vue · Angular features · SPA ante enti? · Component-based architecture · TypeScript role · Angular ecosystem
Read Chapter →
02
2. Angular Prerequisites
HTML basics · CSS basics · JavaScript variables · Functions · Arrays and objects · Destructuring · Spread operator · Promises · async/await · TypeScript basics · Classes and interfaces · Modules
Read Chapter →
Phase 02
Setup and Project Structure
03
3. Angular Setup & CLI
Node.js installation · npm ante enti? · Angular CLI · Angular CLI installation · Creating a project · Standalone components option · Routing option · Stylesheet option · Running the app · Building the app · Production preview · Setup errors
Read Chapter →
04
4. Angular Project Structure
src folder · main.ts · app folder · app.ts · app.html · app.css · app.config.ts · app.routes.ts · public folder · angular.json · package.json · tsconfig.json
Read Chapter →
05
5. Your First Component
Component ante enti? · @Component · Selector · Template · Styles · Standalone component · Component imports · Creating component with CLI · Rendering component · Component file structure
Read Chapter →
Phase 03
Templates and Data Binding
06
6. Templates & Interpolation
Template ante enti? · HTML inside Angular · Interpolation · Template expressions · Template statements · Template variables · Comments · Safe navigation · Dynamic content · Template organization
Read Chapter →
07
7. Data Binding
Interpolation {{ }} · Property binding [property] · Event binding (event) · Two-way binding [(ngModel)] · Attribute binding · Class binding · Style binding · Dynamic images · Disabled buttons · Binding mistakes
Read Chapter →
08
8. Conditions & Loops
@if · @else if · @else · @for · track · @switch · Loading UI · Empty state · Error state · Rendering lists · Legacy *ngIf overview · Legacy *ngFor overview
Read Chapter →
Phase 04
Components Communication
09
9. Component Inputs
Parent and child components · Passing data to child · @Input · Signal inputs · Required inputs · Input aliases · Input transforms · Object inputs · Array inputs · Typed inputs
Read Chapter →
10
10. Component Outputs
Child-to-parent communication · @Output · EventEmitter · Signal outputs · Custom events · Event payload · Handling child events · Typed events · Reusable components · Event naming
Read Chapter →
11
11. Content Projection
Content projection ante enti? · · Default slot · Named slots · Fallback content · Card component · Modal component · Reusable layout · Projected styles · Component composition
Read Chapter →
Phase 05
Directives and Pipes
12
12. Directives
Directive ante enti? · Attribute directives · Structural directives · Built-in directives · Custom directives · @Directive · Host binding · Host listener · v-focus-like focus directive · Tooltip directive · Highlight directive · Directive testing
Read Chapter →
13
13. Pipes
Pipe ante enti? · date · currency · uppercase · lowercase · number · percent · json · Pipe parameters · Pipe chaining · Custom pipes · Pure and impure pipes · Pipe performance
Read Chapter →
14
14. Custom Pipes
Creating a custom pipe · @Pipe · transform() · Pipe arguments · Search pipe · Truncate pipe · Initials pipe · Date pipe · Pure pipe · Testing custom pipe
Read Chapter →
Phase 06
Signals and Reactivity
15
15. Signals
Signals ante enti? · signal() · Reading signals · .set() · .update() · Writable signals · Signals in templates · Signal state · Signal vs normal variable · Signal vs Observable · Signal best practices
Read Chapter →
16
16. Computed & Effects
Derived state · computed() · Read-only signals · Calculating totals · Filtering lists · Computed dependencies · Effect ante enti? · Side effects · LocalStorage synchronization · Cleanup
Read Chapter →
Phase 07
Services and Dependency Injection
17
17. Services
Service ante enti? · Why services are needed · Creating a service · Business logic · API service · Auth service · Shared data service · Utility service · Service scope · Service testing
Read Chapter →
18
18. Dependency Injection
DI ante enti? · Constructor injection · inject() · @Injectable · Root providers · Component providers · Service lifetime · Injection tokens · Optional dependencies · Provider hierarchy · Testing dependencies · DI best practices
Read Chapter →
19
19. Angular Configuration
app.config.ts · Application providers · provideRouter · provideHttpClient · Environment configuration · Development config · Production config · Injection tokens · Feature providers · Global configuration
Read Chapter →
Phase 08
Routing
20
20. Router Basics
Routing ante enti? · Client-side routing · Routes · RouterOutlet · RouterLink · Active links · Home route · About route · Not-found route · Redirects · Route titles · Navigation events
Read Chapter →
21
21. Dynamic Routes
Route parameters · :id · Reading parameters · Course details · Lesson details · Query parameters · URL fragments · Nested routes · Child routes · Lazy routes · Route data · Route title
Read Chapter →
22
22. Route Guards
Guard ante enti? · Authentication guard · CanActivateFn · CanDeactivateFn · Admin guard · Unsaved changes guard · Redirecting users · Route metadata · Guard testing · Guard security limitations
Read Chapter →
23
23. Lazy Loading
Lazy loading ante enti? · loadComponent · loadChildren · Feature routes · Route-level code splitting · Loading performance · Preloading · Selective preloading · Lazy-loaded dashboard · Lazy-loaded tutorial pages
Read Chapter →
Phase 09
Forms
24
24. Template-Driven Forms
Forms in Angular · FormsModule · ngModel · Form state · Input validation · Required fields · Email validation · Error messages · Submit event · Reset form · Form status · Use cases
Read Chapter →
25
25. Reactive Forms
Reactive forms ante enti? · ReactiveFormsModule · FormControl · FormGroup · FormBuilder · Form values · Form status · Validators · Custom validators · Nested form groups · Form arrays · Async validators · Form reset · Patch values
Read Chapter →
26
26. Dynamic Forms
Dynamic fields · FormArray · Add field · Remove field · Dynamic validation · Multi-step form · File upload form · Reusable form control · Form error component · Form submission states
Read Chapter →
Phase 10
HttpClient and APIs
27
27. HttpClient
HTTP ante enti? · HttpClient · provideHttpClient · GET request · POST request · PUT request · PATCH request · DELETE request · Request headers · Query parameters · Request body · Response types · Status codes
Read Chapter →
28
28. API State Handling
Loading state · Success state · Empty state · Error state · Retry request · Search · Filtering · Sorting · Pagination · Infinite scrolling · Optimistic update · Request cancellation
Read Chapter →
29
29. HTTP Interceptors
Interceptor ante enti? · Functional interceptor · Request logging · Auth token · Global error handling · Loading indicator · Retry logic · Cache interceptor · Request headers · Interceptor testing
Read Chapter →
Phase 11
RxJS & Signals Interop
30
30. RxJS Basics
RxJS ante enti? · Observable · Observer · Subscription · subscribe() · of() · from() · map() · filter() · tap() · catchError() · finalize() · Async pipe · Subscription cleanup
Read Chapter →
31
31. RxJS Operators
switchMap · mergeMap · concatMap · exhaustMap · combineLatest · forkJoin · debounceTime · distinctUntilChanged · takeUntil · shareReplay · startWith · scan · Choosing operators
Read Chapter →
32
32. Signals & RxJS Interop
Signals vs Observables · toSignal · toObservable · Observable to signal · Signal to observable · HTTP with signals · RxJS interop · Cleanup · State architecture · Best practices
Read Chapter →
Phase 12
State Management
33
33. Local State
Component state · Signals · Computed state · Effect · Form state · Loading state · Error state · State ownership · Derived state · Avoiding duplicate state
Read Chapter →
34
34. Shared State
Shared service state · Signal-based store · Observable store · Feature state · Global state · Server state · Client state · State persistence · State reset · State debugging
Read Chapter →
35
35. NgRx
NgRx ante enti? · Store · Actions · Reducers · Selectors · Effects · Entity adapter · DevTools · Signal Store overview · When to use NgRx · When not to use global state · NgRx testing
Read Chapter →
Phase 13
Architecture and UI
36
36. Component Architecture
Reusable components · Smart components · Presentational components · Feature components · Shared components · Core services · Feature folders · UI components · Container components · Component APIs · Avoiding huge components · Naming conventions
Read Chapter →
37
37. Angular Material
Angular Material ante enti? · Installation · Buttons · Cards · Tables · Dialogs · Menus · Toolbars · Tabs · Paginator · Form controls · Themes · Responsive Material UI
Read Chapter →
38
38. Responsive UI
Mobile-first design · Flexbox · CSS Grid · Media queries · Responsive navbar · Responsive sidebar · Responsive cards · Responsive tables · Dark mode · Loading skeletons · Empty states · Error states
Read Chapter →
Phase 14
Accessibility and Security
39
39. Accessibility
Accessibility ante enti? · Semantic HTML · Labels · Keyboard navigation · Focus management · ARIA basics · Accessible forms · Accessible dialogs · Screen readers · Color contrast · Accessibility testing · Focus traps
Read Chapter →
40
40. Security
XSS prevention · Safe templates · DomSanitizer · v-html-like risks · Authentication · Authorization · Route guards · Token storage · HTTPS · CSRF basics · CORS · Input validation · Security headers · Dependency security
Read Chapter →
Phase 15
Lifecycle and Performance
41
41. Lifecycle Hooks
Component lifecycle · ngOnInit · ngOnChanges · ngDoCheck · ngAfterViewInit · ngAfterViewChecked · ngOnDestroy · Cleanup · Lifecycle debugging · Lifecycle with signals
Read Chapter →
42
42. Change Detection
Change detection ante enti? · Default strategy · OnPush · Immutable data · Signals and change detection · Async pipe · Manual detection · Zone concepts · Change detection debugging · Avoiding unnecessary work
Read Chapter →
43
43. Performance
Lazy loading · Deferrable views · Code splitting · Image optimization · Virtual scrolling · Large lists · Signal performance · RxJS performance · Bundle analysis · Browser profiling · Core Web Vitals · Performance checklist
Read Chapter →
Phase 16
Testing
44
44. Component Testing
Why testing is needed · Unit testing · Component testing · TestBed · Component fixture · Template output · Button click · Inputs · Outputs · Signals · Forms · Lifecycle
Read Chapter →
45
45. Service & HTTP Testing
Service tests · Mock services · HTTP testing · Mock HTTP requests · Success response · Error response · Interceptor testing · Guard testing · Pipe testing · Directive testing
Read Chapter →
46
46. End-to-End Testing
E2E testing · Playwright · Login flow · Form flow · Navigation flow · API mocking · Browser testing · Test reports · CI tests · Flaky test prevention
Read Chapter →
Phase 17
SSR, Deployment & Projects
47
47. SSR & Hydration
SSR ante enti? · CSR vs SSR · Angular SSR · Hydration · SEO benefits · Server rendering · Browser-only APIs · Transfer state · SSR caching · Static rendering · SSR deployment
Read Chapter →
48
48. Deployment
Development build · Production build · Environment files · API URLs · Static hosting · Docker · CI/CD · GitHub Actions · Cloud deployment · Custom domain · HTTPS · Logs and monitoring · Error tracking · Production checklist
Read Chapter →
49
49. Angular Projects
Beginner Projects (Todo App, Weather Dashboard) · Intermediate Projects (E-commerce, Task Manager) · Advanced Projects (Our Compiler Platform App, Micro Frontends) · Complete Architecture & Component Specs
Read Chapter →
50
50. Angular Practice Quiz
Comprehensive Angular Knowledge Check · 30 Multiple Choice Certification Exam Questions · Signals, Standalone Components, Router, Forms, DI, RxJS & SSR
Read Chapter →