Angular — Enterprise Frontend Engineering
Build scalable enterprise-grade Angular 18 applications with RxJS, NgRx, and Angular Material
Angular is the enterprise frontend framework of choice for large organisations: Google, Microsoft, enterprise banks, and government systems. It is the most opinionated and complete frontend framework — batteries included with TypeScript, DI, RxJS, routing, forms, HTTP, and testing out of the box. This course teaches Angular 18 with standalone components, the inject() function, signals, RxJS reactive patterns, NgRx state management, Angular Material UI, and production deployment.
Course Prerequisites
- JavaScript & TypeScript Foundations: JavaScript & TypeScript Foundations
- React — Fundamentals, Hooks & Modern Patterns: React Fundamentals (recommended for framework context)
Part of Academy Track:
What You Will Master
Curriculum Modules (4 Modules)
Explore the structured module breakdown, lesson outcomes, and practical lab exercises.
Module 1: Angular Core & Standalone Components
5 Lessons • ~4.9 Study Hours (0.49 CEUs)Module 1: Angular Core & Standalone Components. Understand Angular's architecture philosophy, compare it to React and Vue, set up an Angular 18 project with the CLI, and explore the project structure.. Create standalone Angular components, understand the template syntax: interpolation {{}}, property binding [], event binding (), and two-way binding [(ngModel)].
Course Introduction — Angular in the Enterprise
Understand Angular's architecture philosophy, compare it to React and Vue, set up an Angular 18 project with the CLI, and explore the project structure.
Angular Components, Templates & Data Binding
Create standalone Angular components, understand the template syntax: interpolation {{}}, property binding [], event binding (), and two-way binding [(ngModel)].
Angular Directives & New Control Flow (@if, @for)
Use Angular 18's new built-in control flow: @if, @else, @for with track, @switch. Understand structural directives (*ngIf, *ngFor) and attribute directives.
Angular Signals — Reactive Primitives
Use Angular Signals (signal(), computed(), effect()) as the modern alternative to RxJS for local component state — understanding how they integrate with the change detection system.
@Input, @Output & Component Communication
Pass data down with @Input() / input(), emit events up with @Output() / output(), and use the new model() signal for two-way binding in Angular 17+.
Module 2: Services & Dependency Injection
5 Lessons • ~5.8 Study Hours (0.58 CEUs)Module 2: Services & Dependency Injection. Create injectable services with @Injectable, use the new inject() function instead of constructor DI, understand providedIn: 'root' and component-level providers.. Use Angular's HttpClient to make typed HTTP requests, handle responses with RxJS, add interceptors for JWT auth headers and error handling, and use the new resource() API.
Angular Services & the inject() Function
Create injectable services with @Injectable, use the new inject() function instead of constructor DI, understand providedIn: 'root' and component-level providers.
HttpClient & REST API Integration
Use Angular's HttpClient to make typed HTTP requests, handle responses with RxJS, add interceptors for JWT auth headers and error handling, and use the new resource() API.
RxJS — Core Operators for Angular
Master the RxJS operators every Angular developer needs: map, filter, switchMap, mergeMap, catchError, takeUntilDestroyed, debounceTime, distinctUntilChanged, and combineLatest.
Subject, BehaviorSubject & ReplaySubject
Use Subjects as event buses, BehaviorSubject for state streams, ReplaySubject for late subscribers — and understand when to use signals vs observables for state.
Angular Forms — Reactive & Template-Driven
Build typed reactive forms with FormGroup, FormControl, FormArray, custom validators, and cross-field validation. Compare with template-driven forms using NgModel.
Module 3: Routing & Lazy Loading
4 Lessons • ~4.1 Study Hours (0.41 CEUs)Module 3: Routing & Lazy Loading. Configure the Angular Router with provideRouter(), define route configurations, use RouterOutlet, RouterLink, and navigate programmatically with the Router service.. Access dynamic route parameters with ActivatedRoute and the new input binding (withComponentInputBinding), pass static route data, and handle query parameters.
Angular Router — Routes, Outlet & Navigation
Configure the Angular Router with provideRouter(), define route configurations, use RouterOutlet, RouterLink, and navigate programmatically with the Router service.
Route Params, Query Params & Route Data
Access dynamic route parameters with ActivatedRoute and the new input binding (withComponentInputBinding), pass static route data, and handle query parameters.
Lazy Loading Features & Route Guards
Lazy-load feature routes with loadComponent, implement auth guards with canActivate, canMatch, and canDeactivate using the functional guard API.
Route Resolvers & Data Prefetching
Pre-load data before route activation with resolvers, understand the difference between resolvers and component-level fetching, and configure withPreloading strategies.
Module 4: NgRx State Management
5 Lessons • ~6.2 Study Hours (0.62 CEUs)Module 4: NgRx State Management. Set up NgRx Store, define typed state interfaces, create actions with createAction, write reducers with createReducer and on(), and integrate the Store DevTools.. Create memoised selectors with createSelector, compose selectors for derived state, and use the createFeatureSelector pattern for feature state slices.
NgRx Store — Actions, Reducers & State
Set up NgRx Store, define typed state interfaces, create actions with createAction, write reducers with createReducer and on(), and integrate the Store DevTools.
NgRx Selectors & Memoisation
Create memoised selectors with createSelector, compose selectors for derived state, and use the createFeatureSelector pattern for feature state slices.
NgRx Effects — Async Actions & Side Effects
Handle async operations (API calls) with NgRx Effects using createEffect, ofType, switchMap, and dispatch success/failure actions. Compare with the new NgRx Signal Store approach.
NgRx Signal Store — Modern State Management
Use the newer NgRx Signal Store as a simpler, signals-based alternative to the traditional Store/Actions/Reducers/Effects pattern for feature state.
Capstone: Enterprise HR Dashboard with NgRx & Material
Build an enterprise HR management dashboard: NgRx state for employees and departments, Angular Material UI components, reactive forms with validation, JWT auth guards, and lazy-loaded modules.
Frontend Engineering Progression
Continue advancing through the sequential curriculum stages of this academy track: