Angular for Business Training

Lesson 1 • Scaffolding Your First Angular Project

Uses the CLI to generate a new workspace and explores the generated file structure. Learners map each folder and file to its architectural purpose.

Lesson 2 • What Angular Is and Why It Matters

Covers Angular's role as a TypeScript-based SPA framework and its place in the enterprise ecosystem. Sets the conceptual foundation for all subsequent technical work.

Lesson 3 • Installing Node, npm, and Angular CLI

Walks through installing prerequisite tools and the Angular CLI on Windows and macOS. Ensures every learner has a verified, runnable local environment.

Lesson 4 • TypeScript Essentials for Angular

Introduces TypeScript types, interfaces, and decorators as used in Angular code. Provides just enough TypeScript to write and read Angular components confidently.

Lesson 1 • Interpolation and Property Binding

Teaches one-way data flow from component class to template via interpolation and property binding. Learners render dynamic text and bind DOM properties to class fields.

Lesson 2 • Component Communication with Inputs and Outputs

Implements parent-child data flow using @Input and @Output decorators. Learners build a reusable card component that receives data and emits user actions.

Lesson 3 • Anatomy of an Angular Component

Breaks down the component decorator, class, template, and style files. Establishes the mental model for every UI building block used throughout the course.

Lesson 4 • Event Binding and Two-Way Binding

Covers capturing DOM events and the ngModel directive for two-way data flow. Learners build forms and interactive controls that update component state in real time.

Lesson 1 • Handling Asynchronous Data with RxJS

Introduces Observables, the async pipe, and key RxJS operators used with HttpClient. Learners subscribe to API streams and display live data in templates.

Lesson 2 • Setting Up HttpClient for API Calls

Configures HttpClientModule and makes typed GET requests to a REST endpoint. Connects HTTP setup to the service layer introduced in the previous section.

Lesson 3 • Error Handling and HTTP Interceptors

Implements catchError for graceful API failure handling and builds an HTTP interceptor for cross-cutting concerns. Learners add auth headers and global error notifications.

Lesson 4 • Dependency Injection Deep Dive

Explores the Angular injector hierarchy, injection tokens, and provider types. Learners configure multi-level providers to understand scope and override patterns.

Lesson 1 • Route Guards and Access Control

Implements CanActivate and CanDeactivate guards to protect routes and warn on unsaved changes. Learners secure a business dashboard behind an authentication check.

Lesson 2 • Route Parameters and Query Strings

Reads dynamic route segments and optional query parameters inside components. Learners build a detail page that loads the correct record based on the URL.

Lesson 3 • Nested and Child Routes

Structures routes hierarchically to support dashboard layouts with persistent navigation. Connects nested routing to real enterprise shell-and-content UI patterns.

Lesson 4 • Router Setup and Basic Navigation

Configures RouterModule with route definitions and adds router-outlet and routerLink to templates. Learners replace manual URL changes with declarative navigation.

Lesson 1 • Dynamic Forms with FormArray

Uses FormArray to add and remove form controls at runtime for repeating data sets. Learners build an invoice line-item form that grows and shrinks dynamically.

Lesson 2 • Form Submission and Server Integration

Handles form submission, disables controls during requests, and surfaces server errors. Connects the forms layer to the HTTP service layer built in Chapter 3.

Lesson 3 • Built-In and Custom Validators

Applies Angular's built-in validators and creates synchronous and async custom validators. Learners validate business rules such as unique usernames and date range constraints.

Lesson 4 • Template-Driven Forms Fundamentals

Uses ngModel and ngForm to build forms declaratively in HTML templates. Establishes the simpler forms approach before introducing the more powerful reactive alternative.

Lesson 1 • State Management Patterns Overview

Compares local component state, shared service state, and store-based state management. Helps learners choose the right approach based on application complexity.

Lesson 2 • Advanced RxJS Operators for Business Logic

Applies debounceTime, distinctUntilChanged, mergeMap, and forkJoin to real search and parallel-request scenarios. Learners replace imperative async code with declarative pipelines.

Lesson 3 • Introduction to NgRx Store

Installs NgRx and defines actions, reducers, and selectors for a feature slice. Learners trace a user action from dispatch through the reducer to the template.

Lesson 4 • NgRx Effects for Side Effects

Handles API calls and other side effects using NgRx Effects, keeping reducers pure. Learners migrate an HTTP service call into an effect and observe the data flow.

Lesson 1 • Change Detection Strategies

Compares Default and OnPush change detection and identifies when each is appropriate. Learners refactor a slow component tree to use OnPush and measure the improvement.

Lesson 2 • Testing Reactive Forms and Routing

Validates form controls, validators, and router navigation in isolated test suites. Connects testing practices to the forms and routing chapters to ensure full coverage.

Lesson 3 • End-to-End Testing with Cypress

Configures Cypress and writes E2E tests that simulate real user workflows in the browser. Learners automate a login-to-dashboard flow as a regression safety net.

Lesson 4 • Bundle Optimisation Techniques

Uses tree shaking, differential loading, and build budgets to minimise production bundle size. Learners configure angular.json budgets and analyse output with bundle analysers.

Lesson 1 • Deploying to Cloud Hosting Platforms

Deploys the dist folder to static hosting services and configures server-side URL rewriting for SPA routing. Learners publish a live application accessible via a public URL.

Lesson 2 • Angular Upgrade and Long-Term Maintenance

Uses ng update and the Angular Update Guide to migrate between major versions safely. Learners apply a version upgrade on a sample project and resolve breaking changes.

Lesson 3 • Building and Optimising for Production

Runs ng build with production flags and reviews the output dist folder for deployment readiness. Connects optimisation techniques from Chapter 7 to the final build artefact.

Lesson 4 • Environment Configuration and Build Profiles

Uses Angular environment files and build configurations to manage dev, staging, and production settings. Learners replace hard-coded API URLs with environment-aware variables.