add spinner

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

@@ -2,3 +2,6 @@ section {
   width: 60%;
   margin: 10px auto 0 auto;
 }
+.content {
+  width: 50%;
+}

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

@@ -1,3 +1,8 @@
 <section>
-  <h3>{{currentProduct.productName}}</h3>
+  <div class="content">
+    <h3>{{currentProduct.productName}}</h3>
+    <p>Brand: {{currentProduct.brand}}</p>
+    <p>$ {{currentProduct.price}}</p>
+    <p>{{currentProduct.category}}</p>
+  </div>
 </section>

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

@@ -20,7 +20,8 @@ export class ProductDetailComponent implements OnInit {
 
   getProductDetails(): void {
     const id = this.route.snapshot.paramMap.get('id');
-    // console.log(id);
+    // const id$ = this.route.params.subscribe(params => console.log(params['id']));
+    // console.log(id$);
     this.productService.getProduct(id).subscribe((res) => {
       this.currentProduct = res;
       console.log(this.currentProduct);

src/app/product/product.component.html

@@ -1,5 +1,5 @@
+<app-load-spinner *ngIf="showSpinner"></app-load-spinner>
 <section fxFlex=50 class="aligner">
   <mat-card *ngFor="let product of products" [routerLink]="['/product', product._id]" routerLinkActive="router-link-active">
     {{product.productName}}</mat-card>
 </section>
-

src/app/product/product.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+
 import { ProductService } from '../product/product.service';
 import { Product } from './product';
 
@@ -10,6 +11,7 @@ import { Product } from './product';
 })
 export class ProductComponent implements OnInit {
   products: Product[];
+  showSpinner = true;
 
   constructor(private productService: ProductService, private router: Router) { }
 
@@ -19,9 +21,9 @@ export class ProductComponent implements OnInit {
 
   getAllProducts(): void {
     this.productService.getProducts().subscribe((res) => {
+      this.showSpinner = false;
       this.products = res;
       console.log(this.products);
     });
   }
-
 }

src/app/product/product.module.ts

@@ -10,6 +10,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
 
 import { ProductComponent } from '../product/product.component';
 import { ProductDetailComponent } from './product-detail.component';
+import { LoadSpinnerComponent } from '../load-spinner/load-spinner.component';
 
 @NgModule({
   imports: [
@@ -23,7 +24,8 @@ import { ProductDetailComponent } from './product-detail.component';
   ],
   declarations: [
     ProductComponent,
-    ProductDetailComponent
+    ProductDetailComponent,
+    LoadSpinnerComponent
   ]
 })
 export class ProductModule { }