Ctrlk

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

Last updated