Organisational Angular Standards

Reference for the TBT (Turn-by-Turn) Knockout → Angular rewrite. The org’s Angular documentation is light; this file captures the standard patterns the organisation uses. Treat these as the default house style for the rewrite — deviate only with a documented reason, and keep code simplicity as the overriding goal.

Key Features Used

• Component-Based Architecture — UI built using modular and reusable components.
• Routing Module — implements Angular Router for navigation, and route guards for authentication.
• Reactive Forms & Validation — used for complex form handling and client-side validation.
• HttpClient Module — used for consuming REST APIs securely, with JWT token authorization headers.
• RxJS Observables — enables reactive programming patterns for API calls and asynchronous data handling.
• State Management — BehaviorSubjects used for maintaining global state such as logged-in user info and organisation context.
• Material UI — Angular Material for responsive UI components and consistent design.

Notes for the TBT rewrite

These are observations for the rewrite, not part of the org standard above:

• The org standard assumes a REST + JWT backend (HttpClient, route guards for auth). TBT is currently a pure offline client (IndexedDB via Dexie, no backend). Where TBT has no server, the corresponding standards (HttpClient/JWT/auth guards) simply won’t apply — to be confirmed against the feature list and whether a backend/OCC integration is entering scope.
• State management via BehaviorSubjects maps cleanly onto TBT’s current Knockout observables (e.g. header, shift, routing/off-route state) — a natural, low-boilerplate migration path that fits the “simplicity” goal without pulling in NgRx.
• Material UI replaces the current Bootstrap 5 / sticky-ui look. UI should remain similar in functionality but need not be identical.
• Framework-agnostic pieces (MapLibre GL, Turf.js, Dexie) are candidates to carry over unchanged.