Angular Development Patterns

Leverage Cursor IDE and Claude Code for Angular development, from component architecture to enterprise patterns. These recipes cover Angular 17+ features, standalone components, signals, dependency injection, and testing strategies.

Quick Setup for Angular Projects

Initialize Angular with AI

Cursor IDE

1. Open Cursor in your workspace
2. Configure Figma MCP: Settings > MCP > Add Server > http://127.0.0.1:3845/sse
3. Activate Agent mode (Cmd/Ctrl + I)
4. Prompt: “Create a new Angular 17 project with standalone components, Angular Material, Tailwind CSS, and Jest for testing”
5. Enable YOLO mode for automatic CLI execution
6. Review angular.json and project configuration

Claude Code

1. Navigate to projects directory
2. Run claude command
3. Add Figma MCP: claude mcp add figma --transport sse http://127.0.0.1:3845/sse
4. Execute: “Set up Angular 17 with SSR, PWA support, i18n, NgRx for state management, and comprehensive testing setup”
5. Let Claude handle all configuration
6. Use /init for Angular-specific CLAUDE.md

Configure AI Context

Figma MCP Configuration

.mcp.json

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

.cursor/rules/angular-patterns.md

# Angular Development Standards

## Architecture Guidelines
- Use standalone components (Angular 14+)
- Implement lazy loading for features
- Follow Angular style guide
- Use OnPush change detection by default

## Code Conventions
- TypeScript strict mode enabled
- RxJS for reactive programming
- Angular signals for state management
- Dependency injection best practices

## Testing Standards
- Unit tests with Jest
- Integration tests with Testing Library
- E2E tests with Playwright
- Minimum 80% code coverage

Component Development

Design to Angular Components

# PRD: Convert Figma designs to Angular components
# Plan: Use Figma MCP for component generation

"Using Figma MCP, generate Angular component from selected design:
1. Create standalone component with proper imports
2. Use Angular Material where applicable
3. Apply OnPush change detection
4. Extract design tokens to SCSS variables
5. Generate responsive layout directives"

# Example workflow
"Select the Card component in Figma and:
- Generate Angular standalone component
- Map to Material Card component
- Extract elevation and spacing tokens
- Create @Input() properties from Figma variants
- Add proper TypeScript interfaces"

Figma Design Tokens to Angular

// Extract design system from Figma
"Using Figma MCP get_variable_defs:
1. Get all color and spacing variables
2. Generate Angular SCSS variables
3. Create design token service
4. Set up CSS custom properties"

// Generated: _design-tokens.scss
$color-primary: #1D4ED8; // Figma: Primary/Blue
$color-primary-dark: #1E40AF; // Figma: Primary/Dark
$spacing-xs: 0.5rem; // Figma: Spacing/XS
$spacing-sm: 1rem; // Figma: Spacing/S
$spacing-md: 1.5rem; // Figma: Spacing/M

:root {
  --color-primary: #{$color-primary};
  --color-primary-dark: #{$color-primary-dark};
  --spacing-xs: #{$spacing-xs};
  --spacing-sm: #{$spacing-sm};
  --spacing-md: #{$spacing-md};
}

// Generated: design-tokens.service.ts
@Injectable({ providedIn: 'root' })
export class DesignTokensService {
  readonly colors = signal({
    primary: '#1D4ED8',
    primaryDark: '#1E40AF'
  });

  readonly spacing = signal({
    xs: '0.5rem',
    sm: '1rem',
    md: '1.5rem'
  });
}

Standalone Component Patterns

Smart Component Creation:

AI Prompt Example

Create a UserDashboard standalone component that:
1. Uses Angular signals for state management
2. Implements OnPush change detection
3. Has lazy-loaded child routes
4. Integrates with UserService via DI
5. Includes error boundary
6. Has loading states
7. Implements proper TypeScript types
8. Uses Angular Material components

Reactive Forms with AI

Complex Form

Build a multi-step registration form with:
- Reactive forms with strong typing
- Custom validators (async and sync)
- Dynamic form fields based on user selection
- Form array for repeating sections
- Cross-field validation
- Auto-save functionality
- Progress indicator

Form Builder

Create a dynamic form builder that:
- Loads form schema from JSON
- Generates typed reactive forms
- Supports nested form groups
- Implements conditional fields
- Has custom control components
- Validates against JSON schema

State Management

Signals and RxJS

Modern State Pattern:

Implement a shopping cart using Angular signals:
1. Create cart signals for items, total, count
2. Implement computed signals for calculations
3. Add effects for localStorage sync
4. Create service with signal-based API
5. Implement undo/redo functionality
6. Add optimistic updates
7. Handle race conditions

NgRx Integration

1. Store Setup

   Set up NgRx for our e-commerce app:
   - Feature stores for products, cart, user
   - Entity adapters for collections
   - Effects for API calls
   - Selectors with memoization
   - Redux DevTools integration

2. Advanced Patterns

   Implement NgRx best practices:
   - Facade pattern for store access
   - Meta-reducers for logging
   - Router store integration
   - Optimistic updates
   - Error handling strategies

Dependency Injection

Advanced DI Patterns

Show dependency injection patterns:
1. Multi-providers for plugin systems
2. Factory providers with dependencies
3. Injection tokens for configs
4. Hierarchical injectors
5. Optional dependencies
6. Forward references
7. Custom decorators

Notatka

💡 Pro Tip: Use AI to generate boilerplate for providers and tokens, but always review the injection hierarchy to avoid circular dependencies.

Angular Architecture

Micro-Frontend Pattern

Implement micro-frontend architecture:
1. Set up Module Federation
2. Create shell application
3. Build remote modules
4. Implement shared dependencies
5. Handle routing between apps
6. Share authentication state
7. Implement error boundaries

Monorepo with Nx

Set up Nx monorepo for Angular:
1. Create Nx workspace
2. Generate multiple Angular apps
3. Create shared libraries
4. Set up affected commands
5. Configure build caching
6. Implement e2e tests
7. Set up CI/CD pipeline

Performance Optimization

Change Detection Strategies

OnPush Optimization

Optimize component for OnPush:
- Convert to OnPush strategy
- Use immutable data updates
- Implement trackBy functions
- Add ChangeDetectorRef where needed
- Use async pipe properly
- Avoid function calls in templates

Virtual Scrolling

Implement virtual scrolling for large lists:
- Use CDK virtual scroll
- Implement dynamic item heights
- Add scroll anchoring
- Optimize render performance
- Handle keyboard navigation
- Add accessibility features

Bundle Size Optimization

Analyze and optimize bundle size:
1. Run bundle analyzer
2. Implement lazy loading
3. Tree-shake unused code
4. Optimize imports
5. Use dynamic imports
6. Configure build budgets
7. Implement differential loading

Testing Strategies

Component Testing

Testing Pattern

Write comprehensive tests for UserProfile component:
1. Test component initialization
2. Mock service dependencies
3. Test user interactions
4. Verify output events
5. Test error scenarios
6. Check accessibility
7. Test with different inputs
8. Verify change detection

Service Testing

Create tests for AuthService:
- Mock HTTP calls
- Test token management
- Verify interceptor behavior
- Test error handling
- Check retry logic
- Test race conditions
- Verify cleanup

Internationalization

i18n Implementation

Set up internationalization:
1. Configure Angular i18n
2. Extract messages
3. Set up translation files
4. Implement language switcher
5. Handle date/number formats
6. Add RTL support
7. Configure build per locale

Advanced Patterns

Custom Directives

Create advanced directives:
1. Infinite scroll directive
2. Click outside directive
3. Resize observer directive
4. Intersection observer directive
5. Debounce input directive
6. Permission directive
7. Loading state directive

Custom Pipes

Build reusable pipes:
- Safe HTML pipe
- Time ago pipe
- Currency converter pipe
- Search filter pipe
- Truncate pipe
- Markdown pipe
- Highlight pipe

Common Issues

Memory Leak Prevention

Audit and fix memory leaks:
1. Unsubscribe from observables
2. Remove event listeners
3. Clear timers/intervals
4. Destroy dynamic components
5. Clear cached data
6. Profile with DevTools

Circular Dependency Resolution

Resolve circular dependencies:
- Identify circular imports
- Refactor shared code
- Use barrel exports properly
- Implement dependency inversion
- Use forwardRef sparingly

Deployment

SSR Configuration

Set up Angular Universal:
1. Add SSR support
2. Configure Express server
3. Handle browser-only APIs
4. Implement state transfer
5. Optimize rendering
6. Add caching strategy
7. Deploy to Node.js host

PWA Features

Implement Progressive Web App:
- Configure service worker
- Add offline support
- Implement push notifications
- Create app manifest
- Add install prompt
- Handle updates
- Test offline scenarios

Migration Patterns

AngularJS to Angular

Migrate legacy AngularJS app:
1. Set up hybrid mode
2. Upgrade components incrementally
3. Convert services
4. Update routing
5. Migrate forms
6. Remove AngularJS dependencies
7. Complete migration

Next Steps

• Compare with React Patterns
• Explore TypeScript Patterns
• Learn Testing Patterns

Uwaga

Angular’s power comes with complexity. Use AI to handle boilerplate and patterns, but always understand the underlying concepts for debugging and optimization.