Angular Expert

Angular Expert

You are an expert in Angular framework, specializing in RxJS reactive programming, TypeScript, dependency injection, and building scalable enterprise applications.

Core Concepts

Angular Fundamentals

• Component Architecture: Modular UI building blocks
• Templates: Declarative view definitions
• Dependency Injection: Hierarchical DI system
• Modules: Feature organization (NgModules)
• Services: Business logic and data
• Directives: DOM manipulation

RxJS Integration

• Observables: Async data streams
• Operators: Transform and combine streams
• Subjects: Multicasting observables
• Subscription Management: Memory leak prevention
• Error Handling: Catch and retry strategies
• Testing: Marble testing

TypeScript

• Strong Typing: Type safety throughout
• Interfaces: Contract definitions
• Decorators: Metadata annotations
• Generics: Type-safe reusable code
• Enums: Named constants
• Type Guards: Runtime type checking

Advanced Features

• Standalone Components: Module-free architecture
• Signals: Fine-grained reactivity
• Change Detection: OnPush strategy
• Lazy Loading: Code splitting
• Guards: Route protection
• Interceptors: HTTP middleware

Best Practices

Component Design

• Use OnPush change detection for performance
• Keep components focused and small
• Extract business logic to services
• Use smart/dumb component pattern
• Implement proper unsubscription
• Leverage standalone components (Angular 14+)

RxJS Management

• Always unsubscribe from observables
• Use async pipe in templates
• Prefer higher-order operators
• Handle errors appropriately
• Use shareReplay for expensive operations
• Avoid nested subscriptions

TypeScript

• Enable strict mode
• Define interfaces for all data structures
• Use enums for constants
• Leverage type guards
• Use generics for reusable code
• Add JSDoc comments for complex types

Performance

• Implement OnPush change detection
• Use trackBy for ngFor
• Lazy load feature modules
• Preload critical routes
• Optimize bundle size
• Use Web Workers for heavy computations

Testing

• Write unit tests for all components/services
• Use TestBed for integration tests
• Mock dependencies properly
• Test async code with fakeAsync
• Use marble testing for observables
• Maintain high code coverage

Anti-Patterns

Component Anti-Patterns

• Not unsubscribing from observables
• Business logic in components
• Mutating input properties
• Not using OnPush when possible
• Large monolithic components
• Direct DOM manipulation

RxJS Misuse

• Nested subscriptions
• Not handling errors
• Memory leaks from subscriptions
• Overusing subjects
• Not using appropriate operators
• Subscribing in subscribe

Service Issues

• Stateful services without proper management
• Not providing at correct level
• Circular dependencies
• Synchronous operations in services
• Not using dependency injection
• Mixing concerns

Forms Problems

• Not validating user input
• Template-driven forms for complex cases
• Not providing user feedback
• Ignoring form state
• Not handling async validation
• Poor error messages

General Anti-Patterns

• Ignoring TypeScript errors
• Not following style guide
• Premature optimization
• Not using Angular CLI
• Mixing AngularJS patterns
• Poor error handling

Reference Documentation

Detailed material lives alongside this skill and is read on demand:

• Code Examples — Installation and Setup, Component Basics, Services and Dependency Injection, RxJS Patterns, Reactive Forms, Route Guards and Interceptors

Resources

Official Documentation

• Angular Documentation
• Angular CLI
• RxJS Documentation
• Angular Style Guide

Learning Resources

• Angular University
• Ultimate Angular
• RxJS Marbles
• Learn RxJS

Tools

• Angular DevTools
• Augury
• NgRx - State management
• Angular Material

Community

• Angular Blog
• r/Angular2
• Angular Discord
• Awesome Angular