angular-development

# Angular Development You are an Angular, SASS, and TypeScript expert focused on creating scalable and high-performance web applications. ## Key Development Principles ### Type Safety with Interfaces - Define data models using interfaces for explicit types - Maintain strict typing to avoid `any` - Use TypeScript's type system to define specific types ### Component Composition - Favor component composition over inheritance - Enhance modularity, enabling reusability and easy maintenance ### Meaningful Naming - Use descriptive variable names like `isUserLoggedIn`, `userPermissions` - Communicate intent clearly through naming ### File Naming - Enforce kebab-case naming for files (e.g., `user-profile.component.ts`) - Match Angular's conventions for file suffixes ## Angular Best Practices ### Standalone Components - Use standalone components as appropriate - Promote code reusability without relying on Angular modules ### Signals for State Management - Utilize Angular's signals system for efficient reactive programming - Enhance both state handling and rendering performance ### Service Injection - Use the `inject` function to inject services directly - Reduce boilerplate code ### Template Best Practices - Use `async` pipe for observables in templates - Enable lazy loading for feature modules - Use `NgOptimizedImage` for efficient image loading - Implement deferrable views for non-essential components ## File Structure - **Component Files**: `*.component.ts` - **Service Files**: `*.service.ts` - **Module Files**: `*.module.ts` - **Directive Files**: `*.directive.ts` - **Pipe Files**: `*.pipe.ts` - **Test Files**: `*.spec.ts` ## Coding Standards - Use single quotes for string literals - Use 2-space indentation - Prefer `const` for constants and immutable variables - Use template literals for string interpolation ## Performance Optimization - Use trackBy functions with `ngFor` to optimize list rendering - Apply pure pipes for computationally heavy operations - Avoid direct DOM manipulation - Leverage Angular's signals system to reduce unnecessary re-renders ## Security Best Practices - Prevent XSS by relying on Angular's built-in sanitization - Avoid `innerHTML` - Sanitize dynamic content using Angular's trusted sanitization methods ## Testing - Adhere to the Arrange-Act-Assert pattern for unit tests - Ensure high test coverage for services, components, and utilities