HTML CSS to Angular Course
This is a comprehensive Angular course that takes you from setup to deploying a production-ready Angular application. You will learn how Angular is structured, how to build scalable components and services, manage state with NgRx, work with RxJS, and build enterprise-grade applications. Taught 1-to-1 with real projects so every concept is applied practically.
What will you learn
- Understand the Angular framework and how it is structured
- Build components with TypeScript, templates and styles
- Master all 4 data binding types
- Use built-in and custom directives and pipes
- Build and inject services using Angular DI
- Implement routing, guards and lazy loading
- Make HTTP calls and handle responses with RxJS
- Build template-driven and reactive forms with validation
- Manage application state with NgRx
- Optimise performance with OnPush change detection
- Write unit tests for components and services
- Deploy Angular applications to production
Modules and Chapters
Module 1 — Angular Setup and Architecture
- What is Angular and why use it
- Angular CLI and project setup
- Folder structure and NgModule
- How Angular bootstraps
- TypeScript basics for Angular
Module 2 — Components and Templates
- Component anatomy — decorator, class, template
- Interpolation — {{ }}
- Property binding — [ ]
- Event binding — ( )
- Two-way binding — [( )]
- Template reference variables
Module 3 — Directives and Pipes
- ngIf, ngFor, ngSwitch
- ngClass and ngStyle
- Built-in pipes — date, currency, uppercase
- Creating custom pipes
Module 4 — Component Communication
- @Input and @Output decorators
- EventEmitter
- ViewChild and ContentChild
- ng-content projection
- Lifecycle hooks — all 8
Module 5 — Services and Dependency Injection
- Creating and injecting services
- Angular DI system explained
- ProvidedIn root vs module
- Sharing data between components via services
Module 6 — Routing
- RouterModule setup
- RouterLink and RouterOutlet
- Route parameters and ActivatedRoute
- Child routes and nested routing
- CanActivate and CanDeactivate guards
- Lazy loading feature modules
Module 7 — HTTP and RxJS
- HttpClient setup and GET POST PUT DELETE
- HTTP interceptors
- RxJS — Observable, Subject, BehaviorSubject
- Operators — map, filter, switchMap, catchError, debounceTime
- Async pipe in templates
Module 8 — Forms
- Template driven forms with ngModel
- Reactive forms with FormBuilder
- Built-in and custom validators
- Async validators
- FormArray for dynamic fields
Module 9 — NgRx State Management
- Redux pattern explained
- Store, Actions, Reducers, Selectors
- NgRx Effects for async operations
- Connecting components to the store
Module 10 — Performance and Testing
- OnPush change detection strategy
- TrackBy in ngFor
- Lazy loading and preloading
- Unit tests with Jasmine and TestBed
- Component tests with ComponentFixture
Module 11 — Final Project and Deployment
- Build a complete Angular CRUD application
- NgRx integrated state management
- Route guards and lazy loading applied
- Production build and deployment to Vercel
Frequently Asked Questions
No, TypeScript basics are covered in Module 1 before we start Angular.
Yes, if you know JavaScript this course will take you comfortably into Angular development.
Yes, NgRx state management is covered in full in Module 9.
Yes, RxJS is covered in depth including all common operators used in Angular projects.
Yes, you will build a complete Angular CRUD application with NgRx and deploy it live.
Yes, all sessions are personalised and conducted 1-to-1 at your pace.
Yes, unit tests and component tests are covered in Module 10.
Yes, a completion certificate will be provided on finishing the course.
Yes, this course covers everything employers look for in an Angular developer role including NgRx and RxJS which most candidates skip.
Approximately 25 days depending on your learning pace and availability.
Kudos! and close