Angular Development Course

Lesson 1 • Scaffolding Your First Angular Project

Uses the Angular CLI to generate a project, explore its file structure, and run the dev server. Builds familiarity with the workspace layout used throughout the course.

Lesson 2 • Setting Up the Development Environment

Installs Node.js, npm, and the Angular CLI to prepare a local workspace. Directly enables project creation covered in the next section.

Lesson 3 • TypeScript Essentials for Angular

Introduces TypeScript types, interfaces, decorators, and modules as used in Angular. Ensures students can read and write Angular code confidently from chapter two onward.

Lesson 1 • Anatomy of an Angular Component

Breaks down the component decorator, class, template, and styles into their roles. Establishes the mental model for every UI element built in this course.

Lesson 2 • Attribute Directives and Pipes

Applies built-in attribute directives like ngClass and ngStyle, and transforms data with built-in pipes. Rounds out template capabilities before moving to services.

Lesson 3 • Built-in Structural Directives

Covers ngIf, ngFor, and ngSwitch for conditional and list rendering in templates. Enables dynamic content display essential for real-world UIs.

Lesson 4 • Template Syntax and Data Binding

Teaches interpolation, property binding, event binding, and two-way binding with ngModel. Connects component logic to the DOM for interactive UIs.

Lesson 1 • Dependency Injection Deep Dive

Explores the Angular injector hierarchy, provider tokens, and injection scope. Enables precise control over service instantiation and sharing across modules.

Lesson 2 • Creating and Using Services

Generates services with the CLI, encapsulates business logic, and injects them into components. Demonstrates the single-responsibility principle in Angular architecture.

Lesson 3 • Understanding NgModules

Explains declarations, imports, exports, and providers in NgModule metadata. Establishes the module system that organises every Angular application.

Lesson 1 • Route Guards and Resolvers

Protects routes with CanActivate and CanDeactivate guards and prefetches data with Resolve. Ensures secure navigation and pre-loaded data before component rendering.

Lesson 2 • Child Routes and Named Outlets

Nests child routes within feature modules and uses named outlets for auxiliary views. Supports complex layouts like dashboards with side panels.

Lesson 3 • Lazy Loading Feature Modules

Splits the app into lazily loaded feature modules to reduce initial bundle size. Directly improves performance metrics covered in the advanced chapters.

Lesson 4 • Route Parameters and Query Strings

Reads dynamic route segments and optional query parameters using ActivatedRoute. Enables detail views and filtered listings driven by URL state.

Lesson 1 • Async Pipe and Template Integration

Subscribes to observables directly in templates using the async pipe, eliminating manual subscription management. Reduces boilerplate and prevents memory leaks in components.

Lesson 2 • Subjects and Multicasting

Uses Subject, BehaviorSubject, and ReplaySubject to multicast values to multiple subscribers. Enables shared state patterns used in service-based state management.

Lesson 3 • Core RxJS Operators

Applies map, filter, switchMap, mergeMap, and catchError to transform and combine streams. Equips students to handle real-world data transformation requirements.

Lesson 1 • Mocking HTTP in Development

Uses HttpClientTestingModule and in-memory web API to simulate backend responses during development. Decouples frontend progress from backend availability.

Lesson 2 • Error Handling and Retry Strategies

Handles HTTP errors with catchError, retry, and retryWhen operators for resilient API calls. Ensures graceful degradation and user-friendly error feedback.

Lesson 3 • HTTP Interceptors

Creates interceptors to attach auth tokens, log requests, and transform responses globally. Centralises cross-cutting HTTP concerns without modifying individual service calls.

Lesson 4 • HttpClient Setup and GET Requests

Imports HttpClientModule, injects HttpClient, and performs typed GET requests. Establishes the baseline for all backend communication in the application.

Lesson 1 • Dynamic Forms with FormArray

Manages variable-length lists of controls using FormArray for dynamic form scenarios. Supports use cases like adding multiple addresses or line items.

Lesson 2 • Reactive Forms Fundamentals

Constructs forms programmatically using FormControl, FormGroup, and FormBuilder. Enables scalable, testable form logic driven entirely from the component class.

Lesson 3 • Form UX and Accessibility

Applies touched, dirty, and pristine states to control error visibility and improve form UX. Ensures forms meet accessibility standards with proper ARIA attributes.

Lesson 4 • Custom Validators and Async Validation

Writes synchronous and asynchronous custom validators for cross-field and server-side checks. Extends Angular's validation system to meet complex business rules.

Lesson 1 • State Management Fundamentals

Implements service-based state with BehaviorSubject and introduces NgRx store concepts for scalable state. Prepares students to choose the right state strategy for app complexity.

Lesson 2 • Custom Directives and Pipes

Builds reusable attribute directives with HostListener and HostBinding, and creates pure and impure custom pipes. Extends Angular's template capabilities for domain-specific needs.

Lesson 3 • Content Projection and Dynamic Components

Uses ng-content for single and multi-slot projection and creates components dynamically at runtime. Enables highly flexible, reusable UI library components.

Lesson 4 • Change Detection Strategies

Compares Default and OnPush change detection and applies OnPush with immutable data and observables. Significantly reduces unnecessary re-renders in large component trees.