# Angular Conventions

- Canonical framework structure standard: `ai/standards/angular.md`.
- Canonical framework references: `ai/references/frontend-frameworks/` and `ai/references/framework-reference-policy.md`.
- Use standalone components and provider-based application configuration.
- Prefer signals for local component state.
- Use new Angular control flow syntax such as `@if`, `@for`, and `@switch`.
- Use SCSS for Angular component styles.
- Keep root app files thin; split non-trivial pages, panels, shells, forms, admin views, and workflows into focused components with separate templates/styles/tests where appropriate.
- Keep `index.html` as the document shell only.
- Tailwind v4 global entry styles may use CSS to avoid Sass `@import` deprecation warnings.
- Prefer Tailwind utilities for common layout, spacing, typography, and simple visual styling.
- Use component SCSS only when Tailwind would become noisy, repetitive, unreadable, or unsuitable.
- Keep global styles minimal.
- Use global styles only for the Tailwind import, theme tokens, resets, and true app-wide rules.
- Prefer component SCSS over global SCSS for component-specific styling.
- Keep smoke-test UI minimal unless the chunk explicitly asks for product UI work.
- Use generated Apollo Angular services from `apps/frontend/src/app/core/graphql/generated`.
- Put GraphQL operation documents under `apps/frontend/src/app/core/graphql/operations`.
- Do not hand-write types that should come from GraphQL Code Generator.
- Do not add Angular Material. PrimeNG is not currently installed; use its
  reference as a visual/component-behavior benchmark unless future requirements
  explicitly approve adding it. Build recurring controls as shared
  theme-aware components in `apps/frontend/src/app/ui/`.
- Use `@lucide/angular` icons for common UI iconography where suitable.
- Keep visible UI behavior unchanged unless the chunk explicitly requests UI changes.
- Add or update component tests when component behavior changes.