stevenfackley Porting Angular Features to Mobile
You're not maintaining the Angular app — you're reproducing its behavior on mobile. Read it to extract the spec, not to admire the framework. Reproduce the behavior and UX contract, not the DOM.
Extract in this order — this IS the reproduction spec
- Screens & routing — the route config (
app.routes.ts/RouterModule) → your screen list and nav graph. Route params/guards → your nav arguments + access rules. - API calls — services using
HttpClient. Endpoints, request/response shapes, headers/auth. This is the SAME backend your mobile app hits — reuse the contract (consuming-shared-libraries/swift-api-client). - State — what each component holds vs. a shared service (signals /
BehaviorSubject/ NgRx store) → your mobile view-model state. - Validation & business rules — reactive-form
Validators, custom validators, logic in services. Reproduce these EXACTLY (a looser/stricter mobile form is a defect). - UX flows & edge cases — loading/empty/error/disabled states, conditional rendering
(
@if/@for/@empty,*ngIf), confirmations. The states are the spec.
Angular → mobile concept map
| Angular | SwiftUI | MAUI |
|---|---|---|
| Standalone component | View |
ContentPage + XAML |
@Input() / @Output() |
init params / closures (or Combine) | bindable props / events |
Service (providedIn:'root') + DI |
@Observable model / injected service |
DI service (maui-di-services) |
Signal / BehaviorSubject |
@Observable prop / @State |
[ObservableProperty] |
| RxJS pipe / stream | async/await, AsyncStream, Combine |
events / IObservable, async |
HttpClient service |
swift-api-client |
typed HttpClient + ACL |
Reactive form + Validators |
form state + validation funcs | validation in the VM |
| Router + guards | NavigationStack + nav state |
Shell routes + guards |
@if / @for control flow |
if / ForEach |
CollectionView / triggers |
Pipe (date, currency) |
Formatter / computed |
IValueConverter |
Gotchas
- Reproduce validation to the letter — web/mobile validation mismatch is a real bug.
- RxJS hides timing (
debounceTime,switchMap,retry) — capture the behavior, not just the final value. - Web layout ≠ mobile layout — reproduce the flow and rules, redesign the presentation for
touch (apply
distinctive-ui-design; don't transliterate the web look). - Server-driven behavior (interceptors, route guards) may need a mobile equivalent.
Output a reproduction spec
Screens → state → API contract → validation rules → UX states/edge cases → open questions for the
web team. Then build with /plan. The annotated angular-feature-anatomy pattern shows where
each of these lives in real Angular code.