budrobundy69 / budrobundy69/openapi-angular-spring-example

🧩 Integrate OpenAPI TypeScript Client into Angular 19 with Signals

Open
#21 0 comments 0 reactions 1 assignee Claimed by @budrobundy69 View on GitHub
🎨 frontend πŸ› οΈ setup
Dominant language
HTML
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

### 🧩 Integrate OpenAPI TypeScript Client into Angular 19 with Signals

**Goal:** Use the generated OpenAPI TS client to communicate with the backend, and manage state using Angular Signals and SignalStore.

---

### βœ… Tasks

#### 1. Setup SignalStore

- [ ] Create a signal store (`apiStore`) in `frontend/src/app/stores/`
- [ ] Store loading state, errors, and response data
- [ ] Export actions for component usage

#### 2. Create ApiService Wrapper

- [ ] Create `api.service.ts` in `frontend/src/app/services/`
- [ ] Inject OpenAPI-generated services (e.g., `DefaultService`)
- [ ] Wrap service methods to return observables or promises
- [ ] Handle and log HTTP errors gracefully

#### 3. Create Example Feature

- [ ] Create a component that:
- [ ] Triggers an API call using the store
- [ ] Displays loading/error/success state
- [ ] Uses Signals for UI updates

#### 4. Optional: Add Test Coverage

- [ ] Unit test the SignalStore and ApiService
- [ ] Mock OpenAPI responses

---

### πŸ“ Suggested Structure

frontend/
β”œβ”€β”€ src/
β”‚ β”œβ”€β”€ app/
β”‚ β”‚ β”œβ”€β”€ api/ # OpenAPI-generated
β”‚ β”‚ β”œβ”€β”€ services/
β”‚ β”‚ β”‚ └── api.service.ts
β”‚ β”‚ β”œβ”€β”€ stores/
β”‚ β”‚ β”‚ └── api.store.ts
β”‚ β”‚ └── features/
β”‚ β”‚ └── sample/
β”‚ β”‚ └── sample.component.ts

---

### πŸ”œ Next Steps (Separate Issues)

- Add tests to CI
- Extend SignalStore pattern across features
- Trigger OpenAPI client generation automatically in CI
- Cloud Foundry deploy with OpenAPI client

---

**Labels:** `πŸ”„ openapi`, `🧱 frontend`, `🌐 angular`, `πŸ“¦ integration`, `⚑ state`, `πŸ§ͺ test`
**Milestone:** `M1 - Backend MVP`
**Project:** `OpenAPI Angular Spring Example`

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.