# Angular > Angular component architecture, RxJS patterns, change detection, and module organization - Skill: `yldgio/angular` (Agent Skill) - Install (CLI): `npx skillmds add yldgio/angular` - Raw SKILL.md: https://api.skillmd.com/api/skills/yldgio/angular/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: yldgio (https://skillmd.com/u/yldgio) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/yldgio/angular --- ## Angular Code Review Rules ### Security (Critical) - **Template Safety**: Never interpolate untrusted user input into templates (`{{ }}`) without escaping or sanitizing using Angular's built-in mechanisms (DomSanitizer APIs). Always validate and escape any dynamic input before rendering - **[innerHTML] Binding**: If using `[innerHTML]`, always sanitize input with DomSanitizer and add a code comment explaining why. Never bind raw user input directly - **DomSanitizer Usage**: Use `DomSanitizer` only after rigorous validation. Example safe usage: ```typescript // Safe: Sanitized HTML from trusted CMS after validation this.sanitizedContent = this.sanitizer.sanitize(SecurityContext.HTML, trustedCmsContent); ``` - Avoid `bypassSecurityTrust*` methods unless absolutely necessary; when used, require code comments justifying the bypass and document the validation applied - Validate route parameters and query strings to prevent injection attacks - Use Angular's built-in CSRF protection with HttpClient - Validate and sanitize data before binding it in templates, especially when displaying user-generated content in `*ngFor` loops or other directives - Never use HTML comments (``) to store sensitive data or instructions in templates ### Components (Essential) - Use `OnPush` change detection strategy for performance - Inputs should be immutable (don't mutate input objects) - Use `trackBy` function with `*ngFor` for lists - Prefer standalone components for new code (Angular 14+) ### Templates (Essential) - Avoid complex logic in templates (use getters or pipes) - Use `ng-container` for structural directives without extra DOM - Never use dynamic HTML with `[innerHTML]` without proper sanitization; review all XSS risks ### Services (Essential) - Services should be `providedIn: 'root'` unless scoped to feature - Use dependency injection, don't instantiate services manually - HTTP calls belong in services, not components ### RxJS (Essential) - Always unsubscribe (use `takeUntilDestroyed()`, `async` pipe, or `DestroyRef`) - Avoid nested subscribes (use `switchMap`, `mergeMap`, `concatMap`) - Use `shareReplay` for HTTP calls that multiple subscribers need - Handle errors with `catchError` (don't let errors kill the stream) ### Module Organization - Feature modules should be lazy-loaded where possible - Use `SharedModule` for reusable components/pipes/directives. Explicitly define exports to make the module's public API clear - Use `CoreModule` for singleton services (provided in root); import only once in AppModule - Avoid circular module dependencies ### Type Safety - Enable strict TypeScript mode in tsconfig.json - Use `strictTemplates: true` in Angular compiler options - Avoid `any` type - use proper interfaces/types - Type all function parameters and return values ### Accessibility - Use semantic HTML elements (e.g., `