# Angular UI Guide Prompts

> Implement FlexBase UI with Angular: services, components, forms, dialogs, authentication, API response handling, and more.

## How to Use

Tell your AI agent what Angular UI you want to build. It will load the right conventions and guide sections automatically.

**Example prompts you can give your AI agent:**

```
Create the Angular service for the Products module
```

```
Build a list component with pagination for Customers
```

```
Set up the authentication interceptor
```

```
Fix the API response unwrapping in my base service
```

```
Create a reactive form with validation for Order editing
```

```
Implement the complete Angular UI for Invoices
```

***

## Task Catalog

### Critical Rules (Applied Automatically)

* **NEVER remove `id` from Update/Delete DTOs** — causes silent API failures
* **All IDs are `string` type** in TypeScript interfaces
* **ApiResponse\<T> wrapper** — always unwrap `.result` from API responses

***

### Service Tasks

| Task                        | Goal                                                     |
| --------------------------- | -------------------------------------------------------- |
| **Create Base API Service** | HttpClient base with response unwrapping, error handling |
| **Create Module Service**   | Entity-specific service extending base                   |
| **Review API Services**     | Audit services for pattern violations                    |

### Authentication Tasks

| Task                       | Goal                               |
| -------------------------- | ---------------------------------- |
| **Token Storage Service**  | Secure token storage and retrieval |
| **Authentication Service** | Login/logout/refresh token flows   |
| **HTTP Auth Interceptor**  | Attach bearer token to requests    |
| **Error Interceptor**      | Global HTTP error handling         |

### Component Tasks

| Task                              | Goal                                           |
| --------------------------------- | ---------------------------------------------- |
| **Create List Component**         | Data table with pagination, sorting, filtering |
| **Create Reactive Form**          | Form with FormBuilder, validation              |
| **Autocomplete for Foreign Keys** | Lookup/search for related entities             |

### Dialog Tasks

| Task                        | Goal                       |
| --------------------------- | -------------------------- |
| **PrimeNG Dialog**          | Modal dialog with PrimeNG  |
| **Angular Material Dialog** | Modal dialog with Material |

### Routing & State Tasks

| Task                    | Goal                                  |
| ----------------------- | ------------------------------------- |
| **Configure Routes**    | Module routing setup                  |
| **Service-Based State** | State management with BehaviorSubject |
| **NgRx State**          | Redux-style state with NgRx           |

### Complete Implementation Tasks

| Task                        | Goal                                     |
| --------------------------- | ---------------------------------------- |
| **Complete Entity UI**      | Full UI: list + form + service + routing |
| **Complete Project Review** | Full audit against Angular guide         |
| **Sync DTOs with API**      | Compare Angular interfaces with API DTOs |

***

## Related

* **API patterns (build API first):** [FlexBase API Patterns](/flexbase-mcp-ai-prompts/flexbase-api-guide-prompts.md)
* **Generate UI from extraction JSON:** [Implementation Completion](/flexbase-mcp-ai-prompts/implementation-completion-prompts.md)
* **Blazor alternative:** [Blazor FluentUI](/flexbase-mcp-ai-prompts/blazor-fluent-ui-guide-prompts.md)
* **React alternative:** [React UI](/flexbase-mcp-ai-prompts/react-js-ui-guide-prompts.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flexbase.in/flexbase-mcp-ai-prompts/angular-ui-guide-prompts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.