BETTERZON-33: Styles and redirect upon click on product

Frontend/src/app/product-list/product-list.component.css

@@ -0,0 +1,6 @@
+.productItem {
+    border-style: solid;
+    border-color: dimgrey;
+    border-radius: .5em;
+    padding: .25em;
+}

Frontend/src/app/product-list/product-list.component.html

@@ -1,4 +1,4 @@
 <meta charset="UTF-8">
-<p *ngFor="let product of products">
+<p class="productItem"  *ngFor="let product of products" (click)="clickedProduct(product)">
     {{product.name}}
 </p>

Frontend/src/app/product-list/product-list.component.ts

@@ -1,8 +1,7 @@
 import {Component, OnInit} from '@angular/core';
-import axios, {AxiosInterceptorManager, AxiosRequestConfig, AxiosResponse} from 'axios';
-import process from 'process';
 import {ApiService} from '../api.service';
 import {Product} from '../models/product';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-product-list',
@@ -12,7 +11,10 @@ import {Product} from '../models/product';
 export class ProductListComponent implements OnInit {
     products: Product[];
 
-    constructor(private apiService: ApiService) {
+    constructor(
+        private apiService: ApiService,
+        private router: Router
+    ) {
     }
 
     ngOnInit(): void {
@@ -23,4 +25,8 @@ export class ProductListComponent implements OnInit {
         this.apiService.getProducts().subscribe(products => this.products = products);
     }
 
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/helloworld/' + product.product_id)]);
+    }
+
 }