add safe check for product details

src/app/product/product-detail.component.html

@@ -1,8 +1,9 @@
 <section>
   <div class="content">
-    <h3>{{product.productName}}</h3>
-    <p>Brand: {{product.brand}}</p>
-    <p>$ {{product.price}}</p>
-    <p>{{product.category}}</p>
+    <h3>{{product?.productName}}</h3>
+    <p>ProductCode: {{product?.productCode}}</p>
+    <p>Brand: {{product?.brand}}</p>
+    <p>Price: ${{product?.price}}</p>
+    <p>{{product?.category}}</p>
   </div>
 </section>

src/app/product/product-detail.component.ts

@@ -25,7 +25,7 @@ export class ProductDetailComponent implements OnInit {
     // console.log(id$);
     this.productService.getProduct(id).subscribe((res) => {
       this.product = res;
-      console.log(this.product);
+      // console.log(this.product);
     });
   }
 }

src/app/product/product.component.ts

@@ -23,7 +23,7 @@ export class ProductComponent implements OnInit {
     this.productService.getProducts().subscribe((res) => {
       this.showSpinner = false;
       this.products = res;
-      console.log(this.products);
+      // console.log(this.products);
     });
   }
 }