Angular Web Application Development
Duration: 5 Days
This training is designed to help participants build modern, scalable, and maintainable web
applications using Angular. Starting from the fundamentals of TypeScript and Angular
components, participants will gradually move into advanced topics such as routing, services,
HTTP communication, forms, RxJS, and state management. The course emphasizes hands-on
practice, real-world examples, and best practices for building enterprise-grade Angular
applications.
By the end of the course, participants will be able to:
Understand Angular’s architecture and core building blocks
Develop reusable components, directives, and pipes
Manage state and data flow using services and RxJS
Implement navigation and routing in Angular applications
Build and validate forms (template-driven and reactive)
Consume REST APIs securely with Angular HTTP client
Apply testing, debugging, and optimization techniques
Deploy Angular applications to production environments
Course Contents
Day 1
Chapter 1: Introduction to Angular & TypeScript Fundamentals
Modern Web Development: SPA vs MPA
Angular Overview and Use Cases
Installing Node.js, npm, and Angular CLI
Angular Project Structure (src, app, assets, environments)
TypeScript Basics (classes, interfaces, decorators)
Hands-on: First Angular Project with CLI
Chapter 2: Components and Templates
Angular Components (@Component, metadata, templates)
Creating Components with Angular CLI
Data Binding: Interpolation, Property, Event
Two-way Binding with ngModel
Hands-on: Hello World Component
Day 2
Chapter 3: Directives and Pipes
Structural Directives (*ngIf, ngFor)
Attribute Directives (ngClass, ngStyle)
Built-in Pipes (date, currency)
Creating Custom Pipes
Lifecycle Hooks (ngOnInit, ngOnDestroy)
Hands-on: Product List with Directives & Pipes
Chapter 4: Component Communication
Parent-Child Communication (@Input, @Output, EventEmitter)
ViewChild and ContentChild Decorators
Shared Data with Service Injection
Hands-on: Product Detail Component with Event Handling
Day 3
Chapter 5: Services and Dependency Injection
Angular Services (@Injectable)
Dependency Injection Hierarchy
Provider Scopes (root, module, component)
Hands-on: Product Service for Data Sharing
Chapter 6: Routing and Navigation
Angular Router Basics (RouterModule, Routes, RouterLink)
Route Parameters and Query Params
Route Guards (AuthGuard Example)
Lazy Loading with Feature Modules
Hands-on: Multi-Page Catalog with Routing
Day 4
Chapter 7: Forms in Angular
Template-Driven Forms: ngModel, Validation
Reactive Forms: FormGroup, FormControl, FormBuilder
Built-in Validators and Custom Validators
Hands-on: Registration Form with Validation
Chapter 8: HTTP Client and API Integration
Angular HTTP Client Basics (GET, POST, PUT, DELETE)
Handling Errors in HTTP Requests
Interceptors for Authentication and Logging
Hands-on: Connect Angular Form to REST API
Day 5
Chapter 9: RxJS and State Management
Observables vs Promises
Common RxJS Operators (map, filter, mergeMap)
Async Pipe in Templates
State Sharing with Services & BehaviorSubject
Intro to NgRx (Store, Actions, Reducers)
Hands-on: State Management in Product Catalog
Chapter 10: Testing and Deployment
Unit Testing with Jasmine and Karma
Testing Components and Services
Mocking HTTP Requests in Tests
Debugging with Augury & Chrome DevTools
Angular Build & Deployment (ng build, env configs)
Hands-on: Final Project – CRUD Product Catalog App
