Add all fields to product detail page

Author: brianbyrnebg

APM-Start/src/app/products/product-detail.component.html

@@ -1,12 +1,56 @@
 <div class='card'>
     <div class='card-header'>
-        {{pageTitle + ': ' + product?.productName}}
+      {{pageTitle + ': ' + product?.productName}}
     </div>
+  
+    <div class='card-body'
+         *ngIf='product'>
+      <div class='row'>
+        <div class='col-md-8'>
+          <div class='row'>
+            <div class='col-md-4'>Name:</div>
+            <div class='col-md-8'>{{product.productName}}</div>
+          </div>
+          <div class='row'>
+            <div class='col-md-4'>Code:</div>
+            <div class='col-md-8'>{{product.productCode | lowercase | convertToSpaces: '-'}}</div>
+          </div>
+          <div class='row'>
+            <div class='col-md-4'>Description:</div>
+            <div class='col-md-8'>{{product.description}}</div>
+          </div>
+          <div class='row'>
+            <div class='col-md-4'>Availability:</div>
+            <div class='col-md-8'>{{product.releaseDate}}</div>
+          </div>
+          <div class='row'>
+            <div class='col-md-4'>Price:</div>
+            <div class='col-md-8'>{{product.price|currency:'USD':'symbol'}}</div>
+          </div>
+          <div class='row'>
+            <div class='col-md-4'>5 Star Rating:</div>
+            <div class='col-md-8'>
+              <pm-star [rating]='product.starRating'>
+              </pm-star>
+            </div>
+          </div>
+        </div>
+  
+        <div class='col-md-4'>
+          <img class='center-block img-responsive'
+               [style.width.px]='200'
+               [style.margin.px]='2'
+               [src]='product.imageUrl'
+               [title]='product.productName'>
+        </div>
+      </div>
+    </div>
+  
     <div class='card-footer'>
-        <button class='btn btn-outlline-secondary' 
-                style='width:80px'
-                (click)='onBack()'>
-            <i class='fa fa-chevron-left'></i>Back
-        </button>
+      <button class='btn btn-outline-secondary'
+              style='width:80px'
+              (click)='onBack()'>
+        <i class='fa fa-chevron-left'></i> Back
+      </button>
     </div>
-</div>
+  </div>

APM-Start/src/app/products/product-detail.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { IProduct } from './product';
+import { ProductService } from './product.service';
 
 @Component({
   selector: 'pm-product-detail',
@@ -9,25 +10,25 @@ import { IProduct } from './product';
 })
 export class ProductDetailComponent implements OnInit {
   product: IProduct | undefined;
-  constructor(private route: ActivatedRoute, private router: Router) {}
+  
+  constructor(private route: ActivatedRoute, private router: Router, private productService: ProductService) {}
 
   pageTitle: string = 'Product Details';
 
   ngOnInit(): void {
     const id = Number(this.route.snapshot.paramMap.get('id'));
     this.pageTitle += `: ${id}`;
 
-    // TODO remove hard coded product:
-    this.product = {
-      'productId': id,
-      'productName': 'Blah',
-      'productCode': '010202',
-      'releaseDate': 'March 19, 2021',
-      'description': 'Leaf Rake',
-      'price': 19.95,
-      'starRating': 3.2,
-      'imageUrl': 'assets/images/leaf_rake.png'
-    };
+    if(id){
+      this.getProduct(id);
+    }
+  }
+
+  getProduct(id: number): void {
+    this.productService.getProduct(id).subscribe({
+      next: product => this.product = product
+      //error: error => this.errorMessage = error;
+    });
   }
 
   onBack(): void {

APM-Start/src/app/products/product.service.ts

@@ -1,6 +1,6 @@
 import { HttpClient, HttpErrorResponse } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { catchError, Observable, tap, throwError } from "rxjs";
+import { catchError, map, Observable, tap, throwError } from "rxjs";
 import { IProduct } from "./product";
 
 @Injectable({
@@ -19,6 +19,13 @@ export class ProductService {
         );
     }
 
+    getProduct(id: number): Observable<IProduct | undefined> {
+      return this.getProducts()
+      .pipe(
+        map((products:IProduct[]) => products.find(x => x.productId === id))
+      );
+    }
+
     private handleError(err: HttpErrorResponse) {
       let errorMessage = '';
       if (err.error instanceof ErrorEvent) {