Angular Front-End Development Course

Lesson 1 • Angular Modules and Application Bootstrap

Explains NgModules, the root AppModule, and how Angular bootstraps the application. Provides the structural context needed before building components.

Lesson 2 • TypeScript Essentials for Angular

Introduces TypeScript types, interfaces, and decorators required to write Angular code confidently. Bridges JavaScript knowledge to Angular's typed ecosystem.

Lesson 3 • Introduction to Angular Framework

Covers Angular's role in modern front-end development and its MVC-inspired architecture. Sets the conceptual baseline for all subsequent framework topics.

Lesson 4 • Setting Up the Development Environment

Installs and configures Node.js, npm, and the Angular CLI. Ensures every student has a consistent, reproducible local workspace.

Lesson 1 • Built-in Structural Directives

Applies *ngIf, *ngFor, and *ngSwitch to control DOM structure dynamically. Demonstrates how directives extend template expressiveness.

Lesson 2 • Property and Event Binding

Teaches one-way data flow via property binding and user-event handling via event binding. Connects component logic to DOM elements and user interactions.

Lesson 3 • Template Syntax and Expressions

Covers Angular's template expression language, safe navigation, and template reference variables. Enables dynamic content rendering within component views.

Lesson 4 • Component Lifecycle Hooks

Explores the full lifecycle hook sequence from ngOnInit to ngOnDestroy. Teaches when and why to use each hook for initialisation and cleanup.

Lesson 1 • ViewChild and ContentChild Queries

Accesses child component instances and projected content programmatically via queries. Enables advanced component coordination beyond template binding.

Lesson 2 • Parent-to-Child Communication with @Input

Uses @Input to pass data down the component tree and validates input with setters. Establishes the primary downward data-flow pattern in Angular.

Lesson 3 • Building Custom Structural Directives

Implements structural directives using TemplateRef and ViewContainerRef to manipulate the DOM. Extends students' ability to create reusable layout logic.

Lesson 4 • Building Custom Attribute Directives

Creates directives that modify host element appearance or behaviour without changing the DOM structure. Reinforces the directive pattern introduced in Chapter 2.

Lesson 1 • Creating and Providing Angular Services

Generates services with the CLI and registers them at module, component, or root scope. Establishes the service layer as the home for shared logic.

Lesson 2 • HTTP Client and REST API Integration

Configures HttpClientModule and performs GET, POST, PUT, and DELETE requests. Connects the service layer to real back-end data sources.

Lesson 3 • Error Handling and HTTP Interceptors

Implements global error handling with catchError and request/response transformation with interceptors. Produces production-ready HTTP communication patterns.

Lesson 4 • Dependency Injection Deep Dive

Explores the DI hierarchy, injection tokens, and provider types. Enables fine-grained control over how dependencies are resolved across the app.

Lesson 1 • Route Guards and Access Control

Implements CanActivate, CanDeactivate, and CanLoad guards to protect routes. Integrates authentication and authorisation into the navigation layer.

Lesson 2 • Lazy Loading and Route Resolvers

Splits the app into feature modules loaded on demand and pre-fetches data with resolvers. Improves initial load performance and user experience.

Lesson 3 • Nested Routes and Named Outlets

Structures child routes under parent routes and uses named outlets for auxiliary views. Supports complex layout requirements in large applications.

Lesson 4 • Router Setup and Basic Navigation

Configures the RouterModule with route definitions and adds router-outlet and routerLink. Establishes the foundation for all navigation features.

Lesson 1 • Dynamic Forms with FormArray

Uses FormArray to add and remove form controls at runtime for variable-length data. Handles real-world scenarios like repeating line items.

Lesson 2 • Validators and Custom Validation

Applies synchronous and asynchronous validators and creates reusable custom validator functions. Ensures data integrity before submission.

Lesson 3 • Form Submission and State Management

Handles form submission, reset, and dirty/touched state to deliver polished UX. Connects form data to service calls introduced in Chapter 4.

Lesson 4 • Template-Driven Forms

Uses ngForm, ngModel, and built-in validators to build forms declaratively in the template. Introduces form concepts with minimal TypeScript overhead.

Lesson 1 • NgRx Entity and DevTools

Simplifies collection management with NgRx Entity and inspects state with Redux DevTools. Accelerates development and debugging of store-heavy features.

Lesson 2 • Introduction to NgRx Store

Installs NgRx and defines actions, reducers, and the store for a feature slice. Establishes the Redux pattern within the Angular ecosystem.

Lesson 3 • Service-Based State with BehaviourSubject

Stores and shares state across components using BehaviourSubject in a service. Provides a lightweight state solution before introducing NgRx.

Lesson 4 • NgRx Effects for Side Effects

Handles async operations like HTTP calls outside reducers using NgRx Effects. Keeps reducers pure and centralises side-effect logic.

Lesson 1 • Deployment Strategies and CI/CD Integration

Deploys Angular builds to static hosting and integrates automated pipelines for continuous delivery. Closes the development lifecycle from code to production.

Lesson 2 • Unit Testing Components and Services

Writes unit tests with Jasmine and TestBed for components, services, and pipes. Validates individual units in isolation before integration.

Lesson 3 • Bundle Optimisation and Build Configuration

Configures production builds, tree shaking, and differential loading for optimal bundle size. Prepares the app for real-world deployment constraints.

Lesson 4 • End-to-End Testing with Cypress

Automates user-flow testing with Cypress to validate full application behaviour. Complements unit tests with realistic browser-based scenarios.