création tableau et récupération des données

src/app/modules/admin/pages/page-tableau/page-tableau.component.html

@@ -1 +1,29 @@
-<p>page-tableau works!</p>
+<table class="table">
+  <thead class="thead-dark">
+    <tr>
+      <th scope="col">Id</th>
+      <th scope="col">Nom</th>
+      <th scope="col">Prix</th>
+      <th scope="col">Quantité</th>
+      <th scope="col">En stock</th>
+      <th scope="col">Catégorie</th>
+      <th scope="col">Note</th>
+      <th scope="col">Modifier</th>
+      <th scope="col">Supprimer</th>
+
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let products of listData">
+      <th scope="row">{{products.product_id}}</th>
+      <td>{{products.product_name}}</td>
+      <td>{{products.product_price}}</td>
+      <td>{{products.product_qty}}</td>
+      <td>{{products.product_instock}}</td>
+      <td>{{products.product_breadcrumb_label}}</td>
+      <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.product_id)"></td>
+    </tr>
+  </tbody>
+</table>

src/app/modules/admin/pages/page-tableau/page-tableau.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AdminService } from '../../services/admin.service';
 
 @Component({
   selector: 'app-page-tableau',
@@ -6,10 +7,21 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./page-tableau.component.scss']
 })
 export class PageTableauComponent implements OnInit {
-
-  constructor() { }
+  public listData!: any[];
+  constructor(private adminService: AdminService) { }
 
   ngOnInit(): void {
+    this.listData = [];
+    this.adminService.getData().subscribe(
+      (listPlant: any[]) => {
+        this.listData = listPlant;
+        this.listData.length = 9;
+      })
+  }
+
+  onClickDelete(id: number){
+    console.log(id);
+
   }
 
 }

src/app/modules/admin/services/admin.service.ts

@@ -1,9 +1,19 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AdminService {
+  apiUrl: string;
 
-  constructor() { }
+  constructor(private httpClient: HttpClient) {
+    this.apiUrl = environment.apiUrl;
+  }
+
+  getData(): Observable<any[]> {
+    return this.httpClient.get<any[]>(`${this.apiUrl}/list_products`);
+  }
 }