Review Angular Code
Review the Angular code at $ARGUMENTS for adherence to modern best practices and project conventions.
Steps
- Read the project's
CLAUDE.mdfor project-specific conventions. - Read all relevant files at the provided path (component, template, styles, tests, service, routes, NgRx state files).
- Evaluate each file against the checklist below.
- Report findings grouped by severity: errors, warnings, suggestions.
Review Checklist
Component Patterns
- [ ] Uses
standalone: true - [ ] Uses
ChangeDetectionStrategy.OnPush - [ ] Uses
input()/output()functions (not@Input()/@Output()decorators) - [ ] Uses
computed()for derived state - [ ] Uses
inject()for dependency injection (not constructor parameters) - [ ] Component has a single, clear responsibility
- [ ] Page components manage state and delegate rendering to view components
- [ ] View components are purely presentational (no service injection)
Template Patterns
- [ ] Uses
@if,@for,@switch(not*ngIf,*ngFor,[ngSwitch]) - [ ]
@forblocks includetrackexpression - [ ] No arrow functions or complex expressions in templates
- [ ] Uses
class/stylebindings (notngClass/ngStyle) - [ ] Accessibility: semantic HTML, ARIA attributes where needed, keyboard navigable
State Management (Signals)
- [ ] Signals used for component/service state
- [ ] Private writable signals with public readonly selectors
- [ ]
set()orupdate()used to modify signals (notmutate()) - [ ] No unnecessary RxJS where signals suffice
State Management (NgRx)
- [ ] Actions use
createActionGroup()with descriptive source names - [ ] Action events follow naming convention: verb + noun (e.g.,
Load Items,Load Items Success) - [ ] Reducers are pure functions with no side effects
- [ ] Reducers use immutable state transitions (spread operator or EntityAdapter methods)
- [ ] Selectors are memoized via
createSelector() - [ ] Selectors exported as a named object (e.g.,
ItemsSelectors = { ... }) - [ ] Effects use
inject()for dependencies - [ ] Effects handle errors with
catchErrorand dispatch failure actions - [ ] Effects use appropriate flattening operators (
exhaustMapfor loads,switchMapfor searches,concatMapfor writes) - [ ] API services are separate from effects (effects call API services, not
HttpClientdirectly) - [ ] State is registered with
provideState()andprovideEffects()in configuration
Services
- [ ] Uses
providedIn: 'root'or scoped appropriately - [ ] Uses
inject()function - [ ] Handles loading and error state
- [ ] HTTP errors caught and surfaced
Routing
- [ ] Feature routes lazy-loaded with
loadComponent/loadChildren - [ ] Functional guards (not class-based)
- [ ] Routes defined in dedicated
*.routes.tsfiles
Forms
- [ ] Uses reactive forms (not template-driven)
- [ ] Validation defined with
Validators - [ ] Error messages displayed for invalid controls
TypeScript
- [ ] No
anytypes (useunknownfor ambiguous) - [ ] Interfaces for data models (not classes)
- [ ] Strict typing enforced
Testing
- [ ] Test file exists alongside source file
- [ ] Component tests mock injected services
- [ ] Service tests use
HttpTestingControllerfor HTTP - [ ] Tests cover success and error paths
- [ ] Tests verify signal state transitions
- [ ] NgRx reducers tested as pure functions
- [ ] NgRx selectors tested with
.projector() - [ ] NgRx effects tested with
provideMockActions
Performance
- [ ] No unnecessary re-renders (OnPush + signals)
- [ ] Images use
NgOptimizedImage - [ ] Large lists use
@forwithtrack - [ ] No subscriptions without cleanup (
takeUntilDestroyed,DestroyRef)
Styling (Tailwind CSS projects)
- [ ] Uses utility classes instead of custom CSS where appropriate
- [ ] Consistent use of design system tokens (DaisyUI classes, theme colors)
- [ ] No inline styles when utility classes are available
- [ ] Responsive design uses Tailwind breakpoint prefixes
Nx Monorepo (if applicable)
- [ ] Module boundary constraints respected (
@nx/enforce-module-boundaries) - [ ] No direct imports from library internals (use barrel exports / public API)
- [ ] Library scope tags assigned correctly
- [ ] Feature libraries do not depend on other feature libraries (depend on shared/data-access only)
- [ ] Component library has no external dependencies beyond Angular core
Output Format
markdown
## Review: [path]
### Errors (must fix)
- [file:line] Description of issue
### Warnings (should fix)
- [file:line] Description of issue
### Suggestions (consider)
- [file:line] Description of suggestion
### Summary
[1-2 sentences overall assessment]Report only actual issues found. Do not list items that pass the checklist.