This tutorial documents the Pango search integration in angular-senior-showcase. Angular sends a search term to a local Node.js/Express API, receives typed product data, and displays matching results on a dedicated route.

1. Serve a small API

Express exposes GET /api/products?q=.... The current catalog is an in-memory array, so it resets whenever the server restarts. CORS is configured for the Angular development origin at http://localhost:4200.

app.get('/api/products', (request, response) => {
  const query = String(request.query.q ?? '').trim().toLowerCase();
  const matches = products.filter((product) =>
    `${product.name} ${product.category}`.toLowerCase().includes(query)
  );
  response.json(matches);
});

2. Model the response in Angular

The service’s TypeScript interface mirrors the JSON fields: identifier, name, category, price, image path, and alternative text. The generic type on http.get informs TypeScript; it does not validate an untrusted response at runtime.

export interface PangoProduct {
  id: number;
  name: string;
  category: string;
  price: number;
  image: string;
  alt: string;
}

search(query: string): Observable<PangoProduct[]> {
  return this.http.get<PangoProduct[]>(this.endpoint, {
    params: { q: query }
  });
}

3. Navigate to a results route

When the Pango search form is submitted, Angular navigates to /pango-search?q=nyantuy. The results page reads the query parameter and calls the service. RxJS switchMap replaces an older request if a new search arrives; loading, error, and empty states are rendered separately.

4. Verify the API and UI

Run the API from api-server and the Angular host from the workspace root in separate terminals. A direct API check is:

Invoke-RestMethod "http://localhost:3000/api/products?q=nyantuy"

Then submit the same term from the Pango landing page and confirm that the result route shows the product and its local image. This exercise has no database yet; MongoDB/Mongoose will replace the in-memory catalog in the persistence tutorial.

Key takeaway

The Angular service isolates HTTP details, while the component handles request state and rendering. Keeping the API’s current limits explicit prevents a local mock from being described as a production persistence layer.