title: How to structure Angular Service method using streams with parameters to select one entity?
body: <p>This should be an easy question as I'm just starting Angular.  The service is using Angular streams.</p>
  <p>I successfully created Angular 10 service code and template to display a list of products (DDL interface is a dictionary of label / value pairs):</p>
  <pre><code>//product.service.ts
  getProductsDDL$ = this.http.get&lt;IDDL[]&gt;('https://server/api/products/ddl');
  
  // products.component.html
  &lt;ul *ngIf=&quot;productsDDL$ | async as ddls&quot;&gt;
    &lt;li *ngFor=&quot;let d of ddls&quot;&gt;{{d.value}} - {{d.label}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>I plan on adding an html anchor tag <code>&lt;a&gt;</code> with a <code>(click)</code> event to call a component method with the <code>d.value</code> product id as a parameter, then call a service method with the id as a parameter to load the single full product to edit.</p>
  <pre><code>//products.component.html
  getProduct$ = this.http.get&lt;IProduct&gt;('https://server/api/product/{id}');
  </code></pre>
  <p><code>{id}</code> is just my visual placeholder for a product id, e.g., <code>123</code>.  How does one structure the service method to include a parameter to retrieve one product, used each time the user clicks the <code>&lt;a&gt;</code> link in the <code>*ngIf=&quot;product$ | async as product&quot;</code> manner?  I will then send the populated single product component property to a sub component for CRUD.</p>
  <p>I have searched and only found examples of loading all items in a collection, none yet showing service parameters loading a single entity.  I will eventually do full CRUD with this aggregate entity.  Product has a nested array of related products, like flavors of Jello.</p>