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
Section titled “Quick Setup for Angular Projects”Initialize Angular with AI
Section titled “Initialize Angular with AI”- Open Cursor in your workspace
- Configure Figma MCP: Settings > MCP > Add Server >
http://127.0.0.1:3845/sse
- Activate Agent mode (Cmd/Ctrl + I)
- Prompt: “Create a new Angular 17 project with standalone components, Angular Material, Tailwind CSS, and Jest for testing”
- Enable YOLO mode for automatic CLI execution
- Review angular.json and project configuration
- Navigate to projects directory
- Run
claude
command - Add Figma MCP:
claude mcp add figma --transport sse http://127.0.0.1:3845/sse
- Execute: “Set up Angular 17 with SSR, PWA support, i18n, NgRx for state management, and comprehensive testing setup”
- Let Claude handle all configuration
- Use
/init
for Angular-specific CLAUDE.md
Configure AI Context
Section titled “Configure AI Context”Figma MCP Configuration
Section titled “Figma MCP Configuration”{ "mcpServers": { "figma": { "type": "sse", "url": "http://127.0.0.1:3845/sse" } }}
# 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
Section titled “Component Development”Design to Angular Components
Section titled “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 imports2. Use Angular Material where applicable3. Apply OnPush change detection4. Extract design tokens to SCSS variables5. 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
Section titled “Figma Design Tokens to Angular”// Extract design system from Figma"Using Figma MCP get_variable_defs:1. Get all color and spacing variables2. Generate Angular SCSS variables3. Create design token service4. 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
Section titled “Standalone Component Patterns”Smart Component Creation:
Create a UserDashboard standalone component that:1. Uses Angular signals for state management2. Implements OnPush change detection3. Has lazy-loaded child routes4. Integrates with UserService via DI5. Includes error boundary6. Has loading states7. Implements proper TypeScript types8. Uses Angular Material components
Reactive Forms with AI
Section titled “Reactive Forms with AI”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
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
Section titled “State Management”Signals and RxJS
Section titled “Signals and RxJS”Modern State Pattern:
Implement a shopping cart using Angular signals:1. Create cart signals for items, total, count2. Implement computed signals for calculations3. Add effects for localStorage sync4. Create service with signal-based API5. Implement undo/redo functionality6. Add optimistic updates7. Handle race conditions
NgRx Integration
Section titled “NgRx Integration”-
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 -
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
Section titled “Dependency Injection”Advanced DI Patterns
Section titled “Advanced DI Patterns”Show dependency injection patterns:1. Multi-providers for plugin systems2. Factory providers with dependencies3. Injection tokens for configs4. Hierarchical injectors5. Optional dependencies6. Forward references7. Custom decorators
Angular Architecture
Section titled “Angular Architecture”Micro-Frontend Pattern
Section titled “Micro-Frontend Pattern”Implement micro-frontend architecture:1. Set up Module Federation2. Create shell application3. Build remote modules4. Implement shared dependencies5. Handle routing between apps6. Share authentication state7. Implement error boundaries
Monorepo with Nx
Section titled “Monorepo with Nx”Set up Nx monorepo for Angular:1. Create Nx workspace2. Generate multiple Angular apps3. Create shared libraries4. Set up affected commands5. Configure build caching6. Implement e2e tests7. Set up CI/CD pipeline
Performance Optimization
Section titled “Performance Optimization”Change Detection Strategies
Section titled “Change Detection Strategies”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
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
Section titled “Bundle Size Optimization”Analyze and optimize bundle size:1. Run bundle analyzer2. Implement lazy loading3. Tree-shake unused code4. Optimize imports5. Use dynamic imports6. Configure build budgets7. Implement differential loading
Testing Strategies
Section titled “Testing Strategies”Component Testing
Section titled “Component Testing”Write comprehensive tests for UserProfile component:1. Test component initialization2. Mock service dependencies3. Test user interactions4. Verify output events5. Test error scenarios6. Check accessibility7. Test with different inputs8. Verify change detection
Service Testing
Section titled “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
Section titled “Internationalization”i18n Implementation
Section titled “i18n Implementation”Set up internationalization:1. Configure Angular i18n2. Extract messages3. Set up translation files4. Implement language switcher5. Handle date/number formats6. Add RTL support7. Configure build per locale
Advanced Patterns
Section titled “Advanced Patterns”Custom Directives
Section titled “Custom Directives”Create advanced directives:1. Infinite scroll directive2. Click outside directive3. Resize observer directive4. Intersection observer directive5. Debounce input directive6. Permission directive7. Loading state directive
Custom Pipes
Section titled “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
Section titled “Common Issues”Memory Leak Prevention
Section titled “Memory Leak Prevention”Audit and fix memory leaks:1. Unsubscribe from observables2. Remove event listeners3. Clear timers/intervals4. Destroy dynamic components5. Clear cached data6. Profile with DevTools
Circular Dependency Resolution
Section titled “Circular Dependency Resolution”Resolve circular dependencies:- Identify circular imports- Refactor shared code- Use barrel exports properly- Implement dependency inversion- Use forwardRef sparingly
Deployment
Section titled “Deployment”SSR Configuration
Section titled “SSR Configuration”Set up Angular Universal:1. Add SSR support2. Configure Express server3. Handle browser-only APIs4. Implement state transfer5. Optimize rendering6. Add caching strategy7. Deploy to Node.js host
PWA Features
Section titled “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
Section titled “Migration Patterns”AngularJS to Angular
Section titled “AngularJS to Angular”Migrate legacy AngularJS app:1. Set up hybrid mode2. Upgrade components incrementally3. Convert services4. Update routing5. Migrate forms6. Remove AngularJS dependencies7. Complete migration
Next Steps
Section titled “Next Steps”- Compare with React Patterns
- Explore TypeScript Patterns
- Learn Testing Patterns