Angular 21
This 3-day accelerated Angular 21 program delivers focused coverage of essential Angular development topics, combining core framework concepts, practical frontend patterns, and selected hands-on exercises to help participants build solid working knowledge in a short time.
Duration
3 Days
Overview
This 3-day accelerated Angular 21 program is designed for developers who want a focused and practical introduction to modern Angular development. The course covers TypeScript foundations, standalone architecture, components, forms, services, signals, RxJS, API integration, routing, and core application design patterns, while incorporating selected hands-on exercises and guided demonstrations throughout the delivery. Participants will build solid working knowledge of Angular 21 and gain a clear understanding of how its essential features are applied in real-world frontend application development.
Introduction
Angular 21 is a modern frontend framework designed for building scalable, component-driven web applications with strong support for standalone APIs, fine-grained reactivity, signals, and an improved developer experience. This program introduces participants to the essential Angular 21 development model, covering how applications are structured, how components communicate, how forms and services are implemented, and how modern routing and API interaction patterns are applied in practice. Along the way, participants also gain exposure to important contemporary Angular capabilities such as signals-based state handling, modern rendering control, and practical architectural patterns that support maintainable and responsive application development.
Topics Covered
- Introduction to TypeScript
- Introduction to Angular
- Introduction to Single Page Applications
- Building with Components
- Data Binding and Event Handling
- Attribute Directives
- Modern Control Flow and Structural Rendering
- Template Driven Forms
- Reactive Forms
- Services and Dependency Injection
- Signals and Reactive Programming
- RxJS and Observables
- HTTP Client and API Integration
- Pipes and Data Formatting
- Angular Routing and Navigation
- Angular Application Architecture
- Final Project
Audience Profile
Frontend developers, web developers, software engineers, and teams modernizing Angular applications.
Prerequisites
Before attending this course, students should have general programming experience and knowledge of HTML, CSS, and JavaScript.
Day 1
1. Introduction to TypeScript
- Overview
- Environment Setup
- Basic Syntax
- Types, Variables and Operators
- Functions and Arrow Functions
- Interfaces, Classes and Objects
- Modules (ES Modules)
- Summary
2. Introduction to Angular
- Why Angular 21
- Angular 21 Key Features
- Angular CLI Overview
- Installing and Using Angular 21
- Creating the First Angular Project
- Project Structure Overview
- Standalone Components Architecture
- Dependency Injection Overview
- What Is New in Angular 21
- Summary
3. Introduction to Single Page Applications
- What Is a Single Page Application (SPA)
- SPA Workflow
- SPA Advantages
- SPA Challenges
- Implementing SPAs Using Angular 21
- Implementing SPA Using Angular Router
- Summary
Day 2
4. Building with Components
- Introduction to Angular Components
- Standalone Components
- Component Metadata and Decorators
- Templates and Inline Templates
- Interpolation
- Component Styling
- View Encapsulation
- Summary
5. Data Binding and Event Handling
- Angular Binding Syntax
- One-Way Data Binding
- Property Binding
- Event Binding
- Two-Way Binding Using ngModel
- Input and Output Properties
- Parent-Child Component Communication
- Summary
6. Attribute Directives
- What Are Directives
- Directive Types
- Built-in Attribute Directives
- Dynamic Class Binding
- Dynamic Style Binding
- Conditional Styling
- Summary
7. Modern Control Flow and Structural Rendering
- Introduction to Angular Control Flow
- Conditional Rendering Using @if
- Looping Using @for
- Conditional Switching Using @switch
- Rendering Templates Dynamically
- Summary
8. Template Driven Forms
- Overview of Angular Forms
- Creating a Basic Angular Form
- Binding Input Fields
- Handling Form Submission
- Built-in Validators
- Displaying Validation Errors
- Summary
9. Reactive Forms
- Introduction to Reactive Forms
- Creating FormControl
- Creating FormGroup
- Using FormBuilder
- Built-in Validators
- Custom Validators
- Summary
10. Services and Dependency Injection
- What Is a Service
- Creating Services
- Dependency Injection Fundamentals
- Injecting Services
- Shared Services
- Using Services in Components
- Summary
Day 3
11. Signals and Reactive Programming
- Introduction to Angular Signals
- Creating Signals
- Computed Signals
- Signal-Based State Management
- Signals vs Observables
- Using Signals with Components
- Summary
12. RxJS and Observables
- Introduction to RxJS
- Observables Overview
- Creating Observables
- Subscribing and Unsubscribing
- Common RxJS Operators
- Async Pipe
- Summary
13. HTTP Client and API Integration
- Angular HTTP Client Overview
- Setting Up HTTP Client
- Creating API Services
- Making HTTP GET Requests
- POST, PUT and DELETE Requests
- Handling HTTP Responses
- Error Handling Strategies
- Consuming APIs in Components
- Summary
14. Pipes and Data Formatting
- What Are Pipes
- Built-in Pipes
- Decimal Pipe
- Currency Pipe
- Date Pipe
- Creating Custom Pipes
- Summary
15. Angular Routing and Navigation
- Routing Overview
- Route Configuration Using Standalone APIs
- Router Outlet
- Navigation Links
- Programmatic Navigation
- Route Parameters
- Lazy Loading Routes
- Summary
16. Angular Application Architecture
- Feature-based folder structure
- Service-based state management
- Separation of concerns
- Reusable component design
- Summary
17. Final Project
- Build a compact Angular application
- Component-based UI structure
- Form handling and validation
- Service integration with API calls
- Routing and navigation flow
- Signals or RxJS for state updates
- Summary and wrap-up