Repository files navigation

A modern Angular sample project showcasing the latest features and best practices, built as an interactive coffee shop application.

• Angular v20 (Release Candidate) - Latest Angular features
• Standalone Components (v14+) - No NgModule dependencies
• Angular Signals (v16+) - Modern reactive primitives
• New Control Flow (v17+) - @if, @for, @switch syntax
• Modern inject() function - Dependency injection
• Angular Material - UI component library
• Jest Testing - Modern testing framework

• Visual Studio Code - Primary development environment
• Angular Language Service - Essential for Angular development
• Angular Essentials Extension Pack by Loiane -Install here

• Angular Language Service
• Angular Snippets
• TypeScript Hero
• GitLens
• Prettier
• ESLint
• Material Icon Theme

This project includes comprehensive documentation in the/docs folder:

• Standalone Components Migration - Complete migration guide
• Angular Signals Guide - Modern reactive programming
• Control Flow Syntax - New @if, @for syntax
• Cart Implementation - State management patterns
• Jest Migration - Testing framework migration

The project usesJest instead of Karma for faster test execution:

• Unit Tests: Component and service testing
• Coverage Reports: Available in/coverage directory
• CI/CD Integration: GitHub Actions automated testing
• Test-Driven Development: Comprehensive test suites

Current test coverage includes:

• ✅ All services (Cart, Products, Form Utils)
• ✅ All components (Cart, Products, Shared)
• ✅ Route configuration
• ✅ Application bootstrap

This project runs Angular inzoneless mode using the built-inprovideZonelessChangeDetection() API.

Benefits:

• ⚡ Fewer unnecessary change detection cycles
• 🧪 Faster and more predictable unit tests (no async Zone stabilization overhead)
• 🧼 Smaller runtime surface (Zone.js removed)

Implementation details:

• provideZonelessChangeDetection() is configured inapp.config.ts.
• zone.js dependency has been removed frompackage.json.
• Jest test environment usessetupZonelessTestEnv() fromjest-preset-angular (seesetup-jest.ts).

If you need to temporarily re-enable Zone.js (e.g. for a library that still relies on it), reinstallzone.js and switch the test setup back tosetupZoneTestEnv().

src/├── app/│   ├── cart/              # Shopping cart feature│   ├── products/          # Product catalog feature│   ├── components/        # Shared components│   ├── app.routes.ts      # Route configuration│   └── app.component.ts   # Root component├── public/                # Static assets└── styles.scss            # Global styles

1. Standalone Components: No NgModule dependencies

   @Component({standalone:true,imports:[CommonModule,MatButtonModule],// ...})

2. Signal-based State Management:

   cartItems=signal<CartItem[]>([]);cartCount=computed(()=>this.cartItems().length);

3. Modern Dependency Injection:

   privatecartService=inject(CartService);privaterouter=inject(Router);

The project includes GitHub Actions for:

• ✅Continuous Integration - Automated testing
• ✅Build Verification - Ensure production builds work
• ✅Dependency Updates - Automated dependency management

npm run build# Outputs to dist/ directory

This is a demonstration project showcasing modern Angular features. Feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add/update tests
5. Submit a pull request

This project is licensed under the MIT License - see theLICENSE file for details.

Loiane Groner

• GitHub:@loiane
• Website:loiane.com
• Angular Extension Pack:VS Code Marketplace

⭐Star this repository if you found it helpful! ⭐

Modern product listing with Material Design components and shopping cart integration:

Interactive cart with quantity management and total calculations:

This application demonstrates modern Angular architecture patterns:

• Feature-based structure with lazy-loaded routes
• Standalone components eliminating NgModule complexity
• Signal-based state management for cart functionality
• Reactive forms with typed validators
• Service-based architecture with dependency injection
• Material Design for consistent UI/UX

• 🛍️Product Catalog - Browse coffee products with filtering
• 🛒Shopping Cart - Add/remove items with real-time updates
• 📱Responsive Design - Mobile-first Material Design
• 🧪Comprehensive Testing - Jest unit tests with coverage

• Node.js 22+ -Download here
• npm (comes with Node.js)
• Git (optional, for cloning)

1. Install dependencies:

   npm install

2. Start the development server:

   npm run start

   The application will automatically open athttp://localhost:4200

3. Run tests:

   npm runtest# Run all testsnpm run test:watch# Watch modenpm run test:coverage# Generate coverage report

4. Build for production:

   npm run build