Angular Training Course

Domain 1: Foundations (8 hours)

Covers: Building Your First Angular Application · Introduction to TypeScript

Set up your development environment and master the language of Angular

Building Your First Angular Application

• Installing and using the Angular CLI
• Using schematics to automate code generation and builds
• Creating and running a new Angular application
• Angular project structure and file organisation
• Essential Angular tools in Visual Studio Code

Introduction to TypeScript

• What TypeScript is and why Angular uses it
• Basic types — string, number, boolean, array, tuple, enum
• Interfaces and type aliases
• Classes, access modifiers, and inheritance
• Generics and advanced type features
• Latest TypeScript language features

Domain 2: Core Angular (8 hours)

Covers: Structuring User Interfaces with Components · Enriching Applications Using Pipes and Directives · Managing Complex Tasks with Services

Master the core building blocks of every Angular application

Structuring User Interfaces with Components

• Component architecture and the decorator pattern
• Connecting a component to its template
• Input and output bindings for component communication
• Change detection strategies (Default vs OnPush)
• Component lifecycle hooks and custom logic execution

Enriching Applications Using Pipes and Directives

• Angular's built-in pipes (date, currency, async, and more)
• Building custom pipes
• Structural directives (ngIf, ngFor, ngSwitch)
• Attribute directives and custom directive creation
• Using directives to manipulate the DOM

Managing Complex Tasks with Services

• How Angular's dependency injection mechanism works
• Creating and registering services
• Injecting services into components
• Configuring providers (root, module, component level)
• Singleton services and shared state

Domain 3: Reactivity & State (8 hours)

Covers: Reactive Patterns in Angular · Tracking Application State with Signals · Communicating with Data Services over HTTP

Master reactive programming, state management, and backend communication

Reactive Patterns in Angular

• What reactive programming is and why it matters
• Observables, subjects, and the RxJS library
• Common RxJS operators: map, filter, switchMap, mergeMap, catchError
• Using the async pipe in templates
• Hot vs cold observables

Tracking Application State with Signals

• The rationale behind the Signals API
• Creating and reading signals
• Computed signals and effects
• Using signals to track application state
• Signals interoperability with RxJS

Communicating with Data Services over HTTP

• Setting up HttpClient in an Angular application
• Performing GET, POST, PUT, and DELETE operations
• Handling HTTP responses and errors
• Setting custom request headers
• HTTP interceptors — modifying requests and responses

Domain 4: Application Architecture (8 hours)

Covers: Navigating through Applications with Routing · Collecting User Data with Forms · Handling Application Errors

Structure complete Angular applications with routing, forms, and robust error handling

Navigating through Applications with Routing

• Configuring the Angular Router
• Activating routes and navigating programmatically
• Passing and reading URL parameters
• Child routes and nested route structures
• Lazy loading feature modules for code splitting
• Route guards (CanActivate, CanDeactivate)
• Resolvers — pre-fetching data before component initialisation

Collecting User Data with Forms

• Template-driven forms and ngModel
• Reactive forms with FormGroup and FormControl
• FormBuilder for simplified form creation
• Built-in validators and custom validation
• Tracking form and control state (touched, dirty, valid)
• Displaying validation error messages

Handling Application Errors

• Types of errors in an Angular application
• Handling HTTP errors in services and components
• Global error handling with ErrorHandler
• Angular framework errors and how to diagnose them
• User-friendly error feedback patterns

Domain 5: Production & Quality (8 hours)

Covers: Introduction to Angular Material · Unit Testing Angular Applications · Bringing Applications to Production · Optimizing Application Performance

Polish, test, deploy, and optimise production-grade Angular applications

Introduction to Angular Material

• What Angular Material is and how it implements Material Design
• Installing and configuring Angular Material
• Core components: buttons, inputs, dialogs, tables, navigation
• Bundled themes and how to apply them
• Creating a custom Material theme

Unit Testing Angular Applications

• Testing tools — Jasmine, Karma, and TestBed
• Anatomy of a unit test (arrange, act, assert)
• Testing components — templates, inputs, outputs
• Testing services and overriding dependencies
• Testing pipes and directives
• What to test and what not to test

Bringing Applications to Production

• Building an Angular application with the CLI
• Environment files and passing build-time variables
• Build optimisations (tree shaking, AOT compilation)
• Deployment options and strategies
• Serving an Angular app from a web server

Optimizing Application Performance

• Understanding Core Web Vitals (LCP, CLS, INP)
• How CWV affects Angular application performance
• Server-side rendering (SSR) with Angular Universal
• Hydration and its performance benefits
• Image optimisation with NgOptimizedImage

Practical Projects & Exercises (Throughout Course)

Hands-On Practice

• Live coding exercises after every major topic
• Incremental project built across all 5 domains
• Real REST API integration exercises
• Form-building and validation challenges
• Testing exercises with feedback

Portfolio Project

• A fully functional Angular application built during the course
• Incorporates routing, HTTP, forms, and Angular Material
• Ready to showcase in your developer portfolio
• Deployed and accessible online by course end

Angular CLI & Tooling

• Angular CLI installation and usage
• Code generation with schematics
• VS Code Angular extensions
• Project structure and conventions

TypeScript Proficiency

• Types, interfaces, and classes
• Generics and advanced types
• Decorators used in Angular
• Modern TypeScript features

Components & Templates

• Component architecture
• Input/output bindings
• Lifecycle hooks
• Change detection strategies

Pipes & Directives

• Built-in and custom pipes
• Structural and attribute directives
• DOM manipulation techniques
• Reusable directive patterns

Services & Dependency Injection

• Creating and providing services
• Angular's DI mechanism
• Singleton and scoped providers
• Shared application state

RxJS & Signals

• Observables and subjects
• Common RxJS operators
• The Angular Signals API
• RxJS and Signals interoperability

HTTP & Routing

• REST API communication
• HTTP interceptors
• Router configuration and navigation
• Lazy loading and route guards

Forms, Testing & Deployment

• Reactive forms and validation
• Unit testing with Jasmine and Karma
• Production builds and deployment
• Core Web Vitals and performance

The Angular Framework

• Maintained by Google: Angular is developed and maintained by Google's Angular team
• TypeScript-First: Angular is built entirely with TypeScript, enforcing code quality and scalability
• Full Framework: Angular provides everything out of the box — routing, forms, HTTP, testing, and more
• Long-Term Support: Major LTS releases every two years with 18 months of active support
• Version: This course covers modern Angular (v17+) with standalone components and the Signals API

Why Learn Angular?

• Enterprise Adoption: Angular is the framework of choice for large-scale enterprise applications
• High Demand: Angular developers are consistently among the most in-demand frontend engineers
• Competitive Salaries: Angular expertise commands higher salaries in SA and international markets
• Opinionated Structure: Angular's conventions make large team codebases maintainable and scalable
• Global Community: Huge ecosystem of libraries, tooling, and community resources
• Transferable Skills: TypeScript, RxJS, and component architecture skills transfer to other frameworks

Code College & Angular

• 20+ Years of Excellence: Code College has been training developers since 2004
• Thousands of Graduates: Our alumni work across South Africa and internationally
• Small Class Sizes: Personalised attention and a collaborative learning environment
• Practical Focus: Every concept is taught with hands-on exercises and real-world examples
• Industry-Relevant: Curriculum kept current with the latest Angular releases and best practices

1. Structured Domain Coverage

We cover all 15 topics systematically across 5 domains, ensuring a logical progression from fundamentals through to advanced production concerns. No topic is skipped.

2. Learn by Building

Every concept is immediately followed by hands-on practice. You build real Angular code from day one, reinforcing each topic through application rather than passive study.

3. Incremental Project

Throughout the course you build a single, growing Angular application. By the final day it incorporates routing, HTTP, forms, Angular Material, and deployed to production.

4. Live Coding Demonstrations

Instructors code live in front of the class, showing how to think through problems, handle errors, and apply Angular patterns — not just showing finished solutions.

5. Expert Instruction

Our instructors are practising Angular developers with real project experience. They bring current industry knowledge into the classroom and answer questions from experience, not just theory.

6. Small Classes for Real Learning

We keep class sizes small deliberately. Every student gets face time with the instructor, can ask questions freely, and receives personalised feedback on their code.