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()andthis.items.set(data)to update signal. - Header bar with an Add button →
router.navigate(['/<entity>/new']). - Per row (use
@forwithtrack 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.
- Edit button →
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 },