Angular – 100+ Lab Exercises (Basic, Intermediate, Advanced)

🔰 Basic Level (30+ Exercises)

Goal: Build foundational skills in Angular components, templates, and core framework concepts.

Getting Started & Environment Setup

• Install Angular CLI and create Angular projects.

• Understand Angular architecture and MVC pattern.

• Explore Angular workspace and file structure.

• Create and render Angular components.

• Use Angular template syntax: interpolation, property binding, event binding.

Templates & Directives

• Use structural directives (*ngIf, *ngFor).

• Implement attribute directives (ngClass, ngStyle).

• Two-way data binding with [(ngModel)].

• Handle user input events and form controls.

• Create simple template-driven forms.

Component Communication

• Pass data via @Input and @Output decorators.

• Use EventEmitter for child-to-parent communication.

• Implement ViewChild and ContentChild queries.

• Use lifecycle hooks (ngOnInit, ngOnDestroy).

• Organize components using modules.

🚀 Intermediate Level (40+ Exercises)

Goal: Strengthen Angular proficiency with advanced forms, routing, services, and state management. 

Forms & Validation

• Build reactive forms using FormBuilder.

• Implement custom validators and async validators.

• Manage form arrays and nested forms.

• Handle dynamic form controls.

• Display validation error messages.

Routing & Navigation

• Configure Angular Router with routes and child routes.

• Use route guards (CanActivate, CanDeactivate).

• Manage route parameters and query params.

• Implement lazy loading for modules.

• Handle router events and navigation lifecycle.

Services & Dependency Injection

• Create injectable services.

• Use Angular’s DI system.

• Implement singleton services.

• Consume REST APIs with HttpClient.

• Handle HTTP interceptors for request modification.

State Management & RxJS

• Work with Observables and Subjects.

• Use RxJS operators for stream transformations.

• Manage state with BehaviorSubject.

• Introduce NgRx for Redux-style state management.

• Implement effects for handling side-effects.

Testing & Debugging

• Write unit tests with Jasmine and Karma.

• Test components, services, and pipes.

• Perform end-to-end testing with Protractor or Cypress.

• Debug with Angular DevTools.

• Use Angular CLI testing commands.

🧠 Advanced Level (40+ Exercises)

Goal: Master complex Angular patterns, performance, server-side rendering, and enterprise integration.

Advanced Components & Patterns

• Create dynamic and programmatic components.

• Use content projection and ngTemplateOutlet.

• Implement Angular animations.

• Build reusable libraries and Angular packages.

• Use custom pipes and directives.

Performance Optimization

• Analyze and optimize change detection strategies.

• Use OnPush change detection.

• Implement trackBy in *ngFor for list rendering.

• Lazy load modules and components.

• Optimize bundle size with Angular CLI and Webpack.

Server-Side Rendering & PWA

• Set up Angular Universal for SSR.

• Implement Angular Service Workers for PWA capabilities.

• Manage pre-rendering and SEO optimization.

• Use TransferState API for data hydration.

• Deploy Angular SSR apps on cloud platforms.

Full-Stack Integration & DevOps

• Connect Angular with Node.js/Express backend.

• Implement authentication and authorization (JWT, OAuth).

• Use WebSockets for real-time features.

• Automate build and deployment pipelines (CI/CD).

• Containerize Angular apps with Docker.

Capstone Projects

• Develop a full-featured CRM dashboard.

• Build a real-time collaborative editor.

• Create an enterprise-grade e-commerce platform.

• Implement a data visualization dashboard with D3.js.

• Architect a multi-tenant SaaS Angular application.

✅ Tools & Ecosystem

• Angular 15+ with TypeScript

• Angular CLI, RxJS, NgRx

• Jasmine, Karma, Protractor/Cypress

• Angular Universal, Angular Material

• Docker, Jenkins/GitHub Actions for CI/CD