d2-03-search-page

Installation
SKILL.md

Day 2 · Step 3 — Search page

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

  • On init, call <entity>Service.getAll() and render rows in a Tailwind-styled table.
  • Header bar with an Add button → router.navigate(['/<entity>/new']).
  • Per row: Edit button → router.navigate(['/<entity>', item.id, 'edit']); Delete button → router.navigate(['/<entity>', item.id, 'delete']).

Route table (app.routes.ts) — add all four routes now even though the form and confirm-delete pages are built in later steps, so navigation doesn't 404 once those steps land:

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