Angular course

Lesson 1 • What Is Angular

Covers Angular's role as a platform, its versioning history, and how it differs from other frameworks. Sets the conceptual baseline for all subsequent chapters.

Lesson 2 • Development Environment Configuration

Installs Node.js, npm, and the Angular CLI to prepare a local machine for development. Ensures every learner has a consistent, functional toolchain.

Lesson 3 • TypeScript Essentials for Angular

Reviews TypeScript features most relevant to Angular: types, interfaces, decorators, and classes. Bridges JavaScript knowledge to Angular's strongly typed patterns.

Lesson 4 • Scaffolding Your First Project

Uses the Angular CLI to generate a new workspace and explores the generated file structure. Connects environment setup to hands-on project creation.

Lesson 1 • Component Input and Output

Uses @Input and @Output decorators to pass data between parent and child components. Introduces the event emitter pattern for child-to-parent communication.

Lesson 2 • Component Lifecycle Hooks

Implements OnInit, OnChanges, OnDestroy, and other lifecycle hooks to control component behaviour. Teaches when and why to use each hook in real scenarios.

Lesson 3 • Creating and Configuring Components

Generates components via CLI and manually, configuring selector, template, and style metadata. Establishes the component as Angular's primary UI unit.

Lesson 4 • Built-in Directives

Applies structural directives (ngIf, ngFor, ngSwitch) and attribute directives (ngClass, ngStyle) to templates. Enables conditional rendering and dynamic styling.

Lesson 1 • Dependency Injection Fundamentals

Explains the injector hierarchy, provider tokens, and how Angular resolves dependencies at runtime. Builds the foundation for service-based architecture.

Lesson 2 • Feature and Shared Modules

Creates dedicated feature modules and a shared module for reusable components and pipes. Reduces coupling and improves code organisation across large apps.

Lesson 3 • Creating and Providing Services

Generates services with CLI, registers them at root or module level, and injects them into components. Demonstrates separation of business logic from UI code.

Lesson 4 • Standalone Components Overview

Introduces Angular's standalone API as an alternative to NgModule-based architecture. Prepares learners for modern Angular patterns without abandoning module knowledge.

Lesson 1 • Route Parameters and Query Strings

Reads dynamic route segments and optional query parameters inside components using ActivatedRoute. Enables data-driven navigation patterns.

Lesson 2 • Route Guards and Resolvers

Implements CanActivate, CanDeactivate, and Resolve guards to control access and prefetch data. Secures routes and improves perceived performance.

Lesson 3 • Nested and Child Routes

Configures children arrays and secondary router outlets for hierarchical navigation. Supports complex layouts with independently navigable sections.

Lesson 4 • Router Setup and Basic Navigation

Configures the RouterModule, defines route arrays, and adds router-outlet and routerLink to templates. Establishes the foundation for all navigation features.

Lesson 1 • Validation and Error Handling

Applies synchronous and asynchronous validators and displays contextual error messages. Ensures data integrity and clear user feedback.

Lesson 2 • Dynamic Forms with FormArray

Adds and removes controls at runtime using FormArray to support variable-length data entry. Covers real-world patterns like repeating form sections.

Lesson 3 • Reactive Forms Fundamentals

Constructs FormGroup, FormControl, and FormArray programmatically using ReactiveFormsModule. Provides fine-grained control over form state and validation logic.

Lesson 4 • Form Performance and Best Practices

Optimises change detection for large forms and applies reusable form patterns. Connects form knowledge to production-quality implementation standards.

Lesson 1 • POST, PUT, DELETE Operations

Sends data to APIs using POST, updates resources with PUT/PATCH, and deletes with DELETE. Completes the full CRUD cycle against a REST endpoint.

Lesson 2 • HttpClient Setup and GET Requests

Imports HttpClientModule, injects HttpClient, and performs typed GET requests. Establishes the pattern for all subsequent HTTP operations.

Lesson 3 • Loading States and Error UX

Manages loading indicators, empty states, and error messages tied to HTTP request lifecycle. Connects backend integration to polished user experience.

Lesson 4 • HTTP Interceptors

Creates interceptors to attach auth tokens, log requests, and handle global errors centrally. Removes repetitive HTTP logic from individual services.

Lesson 1 • Advanced RxJS Patterns

Applies combineLatest, withLatestFrom, debounceTime, and distinctUntilChanged to real scenarios. Elevates reactive code quality and performance.

Lesson 2 • NgRx Effects for Side Effects

Handles async operations like HTTP calls using NgRx Effects, keeping reducers pure. Separates side-effect logic from state transformation logic.

Lesson 3 • RxJS Core Concepts

Covers observables, observers, subjects, and the subscription model in depth. Provides the reactive programming foundation required for Angular state management.

Lesson 4 • Service-Based State with Subjects

Builds a lightweight state service using BehaviourSubject to share state across components. Demonstrates a scalable pattern before introducing dedicated state libraries.

Lesson 1 • Bundle Optimisation Techniques

Uses tree shaking, lazy loading, and build budgets to reduce production bundle size. Connects Angular CLI build flags to measurable performance gains.

Lesson 2 • Integration and E2E Testing

Tests component interactions and full user flows using Angular Testing Library and Cypress. Validates application behaviour from the user's perspective.

Lesson 3 • Unit Testing with Jasmine and Karma

Writes unit tests for components, services, and pipes using TestBed and spies. Establishes a testing baseline for all Angular code artefacts.

Lesson 4 • Change Detection Optimisation

Applies OnPush strategy, trackBy, and pure pipes to minimise unnecessary re-renders. Directly improves runtime performance in data-heavy applications.