d2-03-search-delete-page

Installation
SKILL.md

Day 2 · Step 3 — Search page with inline delete

up-app/src/app/pages/<entity>-search/<entity>-search.component.ts (standalone component):

  • Use signal<Entity[]>([]) to store the items list; on data fetch, call .set() to update.
  • On init, call <entity>Service.getAll() and this.items.set(data) to update signal.
  • Header bar with an Add button → router.navigate(['/<entity>/new']).
  • Per row (use @for with track item.id):
    • Edit button → router.navigate(['/<entity>', item.id, 'edit'])
    • Delete button → show confirmation popup; if confirmed, call <entity>Service.delete(id) and update signal with .set() on success.

Route table (app.routes.ts) — add the routes the form page will use:

{ path: '<entity>', component: <Entity>SearchComponent },
{ path: '<entity>/new', component: <Entity>FormComponent },
{ path: '<entity>/:id/edit', component: <Entity>FormComponent },
Installs
2
First Seen
Aug 17, 2026
d2-03-search-delete-page — softinter-chiangrai/up-ai-skill-training