rebasing on feature/add-routings

src/app/components/products/products.component.html

-<p>products works!</p>
+<p [ngIf]="errorMessage" [ngIfElse]="ShowProducts">
+  {{ errorMessage }}
+</p>
+<<ng-template #ShowProducts>
+  <div *ngFor="let product of productsList">
+    <p>{{ product.id }}</p>
+    <p>{{ product.title }}</p>
+    <p>{{ product.price }}</p>
+    <p>{{ product.quantity }}</p>
+    <p>{{ product.photo }}</p>
+  </div>
+</ng-template>

src/app/components/products/products.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ProductDTO } from 'src/api-client';
+import { ProductService } from 'src/app/services/product.service';
 
 @Component({
   selector: 'app-products',
   templateUrl: './products.component.html',
-  styleUrls: ['./products.component.scss']
+  styleUrls: ['./products.component.scss'],
 })
-export class ProductsComponent {
+export class ProductsComponent implements OnInit {
+  productsList!: ProductDTO[];
+  errorMessage!: string;
 
+  constructor(private productsService: ProductService) {}
+
+  ngOnInit(): void {
+    this.initProductsList();
+  }
+
+  /* Init the products list by fetching products from the databse */
+  private initProductsList(): void {
+    this.productsService.getProducts().subscribe({
+      next: (data: ProductDTO[]) => {
+        this.productsList = [...data];
+      },
+      error: () => {
+        this.errorMessage = 'Could not fetch products from database';
+      },
+    });
+  }
 }