[HIMA-12] Implemented call to backend API for product detail

src/app/components/product-details/product-details.component.html

@@ -1,6 +1,9 @@
-<p>
-  product-details works! {{id}}
-</p>
+<div class="product-detail-container" *ngIf="item">
+  <div class="general-details">
+    {{item.pr.name}}
+  </div>
+  <div ></div>
+</div>
 <button class="btn" (click)="openModal()">Open checkout</button>
 
 <app-checkout #checkout (closed)="cartActionCompleted($event)"></app-checkout>

src/app/components/product-details/product-details.component.scss

@@ -0,0 +1,9 @@
+@import "../../../assets/scss/variables";
+
+.product-detail-container {
+    display: grid;
+    grid-template-columns: auto;
+    background-color: white;
+    padding: 20px;
+    width: 93%;
+}

src/app/components/product-details/product-details.component.ts

@@ -1,6 +1,8 @@
 import { ActivatedRoute } from '@angular/router';
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { CheckoutComponent } from '../checkout/checkout.component';
+import { ProductService } from 'src/app/core/services/product.service';
+import { ItemDTO } from 'cat-service';
 
 @Component({
   selector: 'app-product-details',
@@ -11,13 +13,20 @@ export class ProductDetailsComponent implements OnInit {
   @ViewChild('checkout') checkoutDialog: CheckoutComponent;
 
   id: number;
+  item: ItemDTO;
 
-  constructor(private route: ActivatedRoute) { }
+  constructor(
+    private route: ActivatedRoute,
+    private productService: ProductService
+  ) { }
 
   ngOnInit() {
     this.route.params.subscribe(
       params => this.id = params['id']
     );
+    this.productService.getItemById(this.id).subscribe(
+      (t: ItemDTO) => this.item = t
+    );
   }
 
   openModal() {