diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
index d18c681..caffef4 100644
--- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
+++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.html
@@ -1,4 +1,4 @@
-<table class="table">
+<table class="table" *ngIf="subCollection$ | async as collection">
   <thead class="thead-dark">
     <tr>
       <th scope="col">Id</th>
@@ -14,6 +14,7 @@
     </tr>
   </thead>
   <tbody>
+<<<<<<< HEAD
     <tr *ngFor="let products of listData">
       <th scope="row">{{products.id}}</th>
       <td>{{products.product_name}}</td>
@@ -24,6 +25,18 @@
       <td>{{products.product_rating}}</td>
       <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
       <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(products.id)"></td>
+=======
+    <tr *ngFor="let products of collection">
+      <th scope="row">{{products.id}}</th>
+      <td>{{products.name}}</td>
+      <td>{{products.price}}</td>
+      <td>{{products.quantity}}</td>
+      <td>{{products.instock}}</td>
+      <!-- <td>{{products.Catégorie.}}</td> -->
+      <td>{{products.rating}}</td>
+      <td><a class="bi-pencil-square" routerLink="../modifier"></a></td>
+      <td class="bi-trash-fill" style="color: red; cursor: pointer;" (click)="onClickDelete(5)"></td>
+>>>>>>> main
     </tr>
   </tbody>
 </table>
diff --git a/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts b/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts
index 420b2df..13f4024 100644
--- a/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts
+++ b/src/app/modules/admin/pages/page-tableau/page-tableau.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+<<<<<<< HEAD
+=======
+import { Subject } from 'rxjs';
+>>>>>>> main
 import { Plant } from '../../models/plant';
 import { AdminService } from '../../services/admin.service';
 
@@ -9,15 +13,22 @@ import { AdminService } from '../../services/admin.service';
 })
 export class PageTableauComponent implements OnInit {
   public listData!: any[];
-  constructor(private adminService: AdminService) { }
+  public subCollection$: Subject<Plant[]>;
+
+  constructor(private adminService: AdminService) {
+    this.subCollection$ = this.adminService.subCollection$;
+    this.adminService.refreshCollection();
+
+    this.adminService.subCollection$.subscribe((data: Plant[]) => console.log("après mapping", data))
+  }
 
   ngOnInit(): void {
-    this.listData = [];
-    this.adminService.getData().subscribe(
-      (listPlant: any[]) => {
-        this.listData = listPlant;
-        this.listData.length = 9;
-      })
+    // this.listData = [];
+    // this.adminService.getData().subscribe(
+    //   (listPlant: any[]) => {
+    //     this.listData = listPlant;
+    //     this.listData.length = 9;
+    //   })
   }
 
   onClickDelete(id: number){
diff --git a/src/app/modules/admin/services/admin.service.ts b/src/app/modules/admin/services/admin.service.ts
index a9a538e..c4d1aa5 100644
--- a/src/app/modules/admin/services/admin.service.ts
+++ b/src/app/modules/admin/services/admin.service.ts
@@ -1,47 +1,48 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable, Subject, tap, map } from 'rxjs';
+import { map, Observable, Subject, tap } from 'rxjs';
 import { environment } from 'src/environments/environment';
-//import { map } from 'underscore';
 import { Plant } from '../models/plant';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AdminService {
-  apiUrl: string;
   public collection$!: Observable<Plant[]>;
   public subCollection$ = new Subject<Plant[]>();
+  apiUrl: string;
+  public plantCollection!: Plant[];
 
   constructor(private httpClient: HttpClient) {
     this.apiUrl = environment.apiUrl;
-
     this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`).pipe(
-      map((tabObj : any[]) => {
+      // Ici on modifie l'objet que transporte notre Observable grâce à l'opérateur map()
+      map((tabObj: any[]) => {
+        //console.log("avant mapping: ", tabObj);
+        // Ici grâce à la méthode .map() on transforme tout les objet json du tableau en instance de notre classe Plant()
         return tabObj.map((obj: any) => {
-          //return new Plant(obj)
-          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id)
+          return new Plant(obj.product_name, obj.product_price,obj.product_quantity,obj.product_instock,obj.product_breadcrumb_label,obj.product_image_source,obj.product_rating,obj.id);
         })
-      })
-    );
-
+      }));
+    //this.collection$ = this.httpClient.get<Plant[]>(`${this.apiUrl}/list_products`);
+    //console.log(this.collection$);
   }
 
   public refreshCollection(): void {
     // On se sert de notre flux de donnée type observable froid
     this.collection$.subscribe((listPlant: Plant[]) => {
+      this.plantCollection = [...listPlant];
       // Utiliser un observable chaud (subject) pour nexter nos données recues de notre observable froid
       this.subCollection$.next(listPlant);
     })
   }
 
-  getData(): Observable<any[]> {
-    return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
-  }
-
   onClickDelete(id: number): Observable<any> {
     return this.httpClient.delete<any>(`${this.apiUrl}/list_products/${id}`).pipe(
       tap(() => this.refreshCollection())
     );
   }
+  // getData(): Observable<any[]> {
+  //   return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
+  // }
 }