feat:adding of the routing data retrieval

src/app/components/order/order.component.html

-<p>order works!</p>
+<ng-container *ngIf="errorMessage; else showOrder">
+  <p>
+    {{ errorMessage }}
+  </p>
+</ng-container>
+<ng-template #showOrder>
+  <div class="order">
+    <h2>Commande #{{ order.id }}</h2>
+    <p>Date de la commande : {{ order.date }}</p>
+    <p>Statut : {{ order.isFinalized ? "Finalisée" : "En cours" }}</p>
+
+    <h3>Articles de la commande :</h3>
+    <ul>
+      <li *ngFor="let article of order.articles">
+        {{ article.title }} (Quantité : {{ article.quantity }})
+      </li>
+    </ul>
+
+    <h3>Client :</h3>
+    <p>
+      Nom du client : {{ order.client.firstName }} {{ order.client.lastName }}
+    </p>
+    <p>Email du client : {{ order.client.email }}</p>
+
+    <button (click)="onGoBackButtonClick()">Retour</button>
+  </div>
+</ng-template>

src/app/components/order/order.component.ts

-import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { OrderDTO } from 'src/api-client';
+import { OrderService } from 'src/app/services/order.service';
 
 @Component({
   selector: 'app-order',
   templateUrl: './order.component.html',
-  styleUrls: ['./order.component.scss']
+  styleUrls: ['./order.component.scss'],
 })
-export class OrderComponent {
+export class OrderComponent implements OnInit {
+  order!: OrderDTO;
+  errorMessage!: string;
 
+  constructor(
+    private ordersService: OrderService,
+    private route: ActivatedRoute,
+    private location: Location
+  ) {}
+
+  ngOnInit(): void {
+    this.initOrder();
+  }
+
+  private initOrder(): void {
+    const id = +this.route.snapshot.params['id'];
+    this.ordersService.getOrder(id).subscribe({
+      next: (data: OrderDTO) => {
+        this.order = data;
+      },
+      error: () => {
+        this.errorMessage = 'Could not get the order';
+      },
+    });
+  }
+
+  public onGoBackButtonClick(): void {
+    this.location.back();
+  }
 }

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

-<p>product works!</p>
+<ng-container *ngIf="errorMessage; else showProduct">
+  <p>
+    {{ errorMessage }}
+  </p>
+</ng-container>
+<ng-template #showProduct>
+  <div class="product">
+    <h2>{{ product.title }}</h2>
+    <p>ID : {{ product.id }}</p>
+    <p>Prix : {{ product.price | currency : "USD" : "symbol" : "1.2-2" }}</p>
+    <p>Quantité : {{ product.quantity }}</p>
+    <p>Description : {{ product.description }}</p>
+
+    <button (click)="onGoBackButtonClick()">Retour</button>
+  </div>
+</ng-template>

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

-import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ProductDTO } from 'src/api-client';
+import { ProductService } from 'src/app/services/product.service';
 
 @Component({
   selector: 'app-product',
   templateUrl: './product.component.html',
-  styleUrls: ['./product.component.scss']
+  styleUrls: ['./product.component.scss'],
 })
-export class ProductComponent {
+export class ProductComponent implements OnInit {
+  product!: ProductDTO;
+  errorMessage!: string;
 
+  constructor(
+    private productsService: ProductService,
+    private route: ActivatedRoute,
+    private location: Location
+  ) {}
+
+  ngOnInit(): void {
+    this.initProduct();
+  }
+
+  private initProduct(): void {
+    const id = +this.route.snapshot.params['id'];
+    this.productsService.getProduct(id).subscribe({
+      next: (data: ProductDTO) => {
+        this.product = data;
+      },
+      error: (error) => {
+        this.errorMessage = 'Could not get the order';
+      },
+    });
+  }
+
+  public onGoBackButtonClick(): void {
+    this.location.back();
+  }
 }