Skip to main content

:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-angular-mcp.json. Edit the source MCP server (not this file), then run npm run generate. :::

Add a data table backed by a real API (Angular)

When to use: You want to display a list/collection of records from a backend service in a table.

Prerequisites​

  • Completed discover-api for the target endpoint.

Steps​

Step 1: Confirm the endpoint and capture its response schema.​

Tools: get_endpoint_details, validate_endpoint

Step 2: Get the Rystad-approved Angular DataTable template.​

Tools: get_component_template

Step 3: Create a typed model interface from the validated response schema.​

Step 4: Create a typed data service that fetches via HttpClient from the gateway path.​

Step 5: Create the standalone table component using injectQuery over the service.​

Tools: get_design_tokens

Step 6: Register the route (guarded).​

Step 7: Add a co-located spec test.​

Step 8: Run the verify gate.​

Full recipe definition​

The complete machine-readable recipe as returned by the MCP server:

{
  "id": "add-data-table",
  "title": "Add a data table backed by a real API (Angular)",
  "when": "You want to display a list/collection of records from a backend service in a table.",
  "prerequisites": [
    "Completed `discover-api` for the target endpoint."
  ],
  "steps": [
    {
      "action": "Confirm the endpoint and capture its response schema.",
      "tools": [
        "get_endpoint_details",
        "validate_endpoint"
      ]
    },
    {
      "action": "Get the Rystad-approved Angular DataTable template.",
      "tools": [
        "get_component_template"
      ],
      "note": "Use name 'DataTable'. Copy its structure — standalone + injectQuery."
    },
    {
      "action": "Create a typed model interface from the validated response schema.",
      "files": [
        "src/app/<domain>/<domain>.model.ts"
      ],
      "note": "Use `interface`. Every field must come from `get_endpoint_details` — do not invent fields."
    },
    {
      "action": "Create a typed data service that fetches via HttpClient from the gateway path.",
      "files": [
        "src/app/<domain>/<domain>.service.ts"
      ],
      "note": "Inject HttpClient with inject(); return HttpClient.get<Model[]>(apiRoute). The interceptor adds auth — do not add headers/credentials yourself."
    },
    {
      "action": "Create the standalone table component using injectQuery over the service.",
      "files": [
        "src/app/<domain>/<domain>-table.component.ts"
      ],
      "tools": [
        "get_design_tokens"
      ],
      "note": "Render loading, error, and empty states. Colors/spacing from tokens (SCSS vars) only."
    },
    {
      "action": "Register the route (guarded).",
      "files": [
        "src/app/app.routes.ts"
      ],
      "note": "Add `{ path, canActivate: [rystadAuthGuard], loadComponent: ... }`."
    },
    {
      "action": "Add a co-located spec test.",
      "files": [
        "src/app/<domain>/<domain>-table.component.spec.ts"
      ],
      "note": "Assert loading→rows render; mock the service."
    },
    {
      "action": "Run the verify gate.",
      "note": "Follow `run-verify`: `ng lint && ng build && ng test` must be green."
    }
  ],
  "filesToCreate": [
    "src/app/<domain>/<domain>.model.ts",
    "src/app/<domain>/<domain>.service.ts",
    "src/app/<domain>/<domain>-table.component.ts",
    "src/app/<domain>/<domain>-table.component.spec.ts"
  ],
  "validation": [
    "Table renders real rows from the validated endpoint.",
    "Loading + error + empty states exist.",
    "`ng test` passes."
  ],
  "doneCriteria": [
    "One endpoint → one table.",
    "Model fields all traceable to `get_endpoint_details`.",
    "run-verify passes."
  ],
  "commonMistakes": [
    "Calling fetch() instead of HttpClient.",
    "Subscribing in ngOnInit instead of injectQuery.",
    "Adding credentials/CSRF headers manually (the interceptor already does).",
    "Inventing response fields not in the endpoint schema."
  ],
  "relatedRecipes": [
    "discover-api",
    "run-verify"
  ]
}