Service restoByCat + icone

src/app/card-category/card-category.component.html

@@ -4,7 +4,7 @@
     <div class="card-body rounded-bottom">
       
      
-      <a routerLink="../restaurants" class="btn">{{ categoryData.libelle }}</a>
+      <a routerLink="../restaurants" class="btn" (click)="onClickCateg(categoryData.id)">{{ categoryData.libelle }}</a>
     </div>
   </div>
   

src/app/card-category/card-category.component.ts

@@ -1,4 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ApiBackService } from '../services/api-back.service';
 
 @Component({
   selector: 'app-card-category',
@@ -9,9 +11,20 @@ export class CardCategoryComponent implements OnInit {
 
   @Input() categoryData : any;
   
-  constructor() { }
+  constructor(private apiBackService : ApiBackService, private route : Router) { }
 
   ngOnInit(): void {
   }
 
+  onClickCateg(id : number){
+
+    
+    this.apiBackService.getRestaurantsByCateg(id);
+
+    this.route.navigate(['restaurants']);
+
+    //console.log('salut les copains');
+    
+  }
+
 }

src/app/card-resto/card-resto.component.html

@@ -1,20 +1,24 @@
-<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "  style="width: 19rem;" >
+<div class="container position-relative shadow p-0 mb-5 bg-body rounded rounded  m-5 rounded-top "
+  style="width: 19rem;">
   <img class="card-img-top " src="assets/ImagesRestos/photo.jpg" alt="Card image cap">
   <div class="rond position-absolute">
     <i class="heart far fa-heart"></i>
   </div>
   <div class="card-body rounded-bottom">
-        <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">NOM RESTAURANT</h3>
+    <h3 class="titre-resto d-flex justify-content-center d-flex align-items-center" style="font-size: 24px;">{{
+      restaurant.nom }}</h3>
 
     <div class="accordion" id="accordionExample">
 
       <h2 class="accordion-header pt-1" id="headingOne">
-            <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+        <button class="btn accordion-button collapsed ps-5 pe-5 " type="button" data-bs-toggle="collapse"
+          data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
           PLUS D'INFOS
         </button>
       </h2>
 
-          <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+      <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
+        data-bs-parent="#accordionExample">
         <div class=" body accordion-body">
           <strong>This is the first item's accordion body.</strong>
           <div class="star-icon d-flex justify-content-flex-start d-flex align-items-center pt-2 ">
@@ -29,21 +33,30 @@
           </div>
           <div class="infos ps-1 pt-2" style="color:#545454">
             <span class="categorie pe-4" style="font-style: italic;">Kebab</span>
-                      <i class="fas fa-walking ps-2 pe-1"style="color:#a8a8a8"></i><span class="categorie pe-4"style="font-weight: bold;">550m</span>
+            <i class="fas fa-walking ps-2 pe-1" style="color:#a8a8a8"></i><span class="categorie pe-4"
-                      <i class="fas fa-euro-sign ps-2 pe-1"style="color:#a8a8a8"></i><span class="prix"style="font-weight: bold;">5-10€</span>
+              style="font-weight: bold;">550m</span>
+            <i class="fas fa-euro-sign ps-2 pe-1" style="color:#a8a8a8"></i><span class="prix"
+              style="font-weight: bold;">5-10€</span>
           </div>
           <div class="trait-rouge pt-3"></div>
-                      <p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span class="description pe-1"style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux texte standard de l'imprimerie depuis 
+          <p class="description pt-3 ps-1 pe-1 text-justify d-block" style="font-size:0.9em; color:#545454"><span
+              class="description pe-1" style="font-style: italic;font-weight: bold;">Descriptif :</span> c’est le faux
+            texte standard de l'imprimerie depuis
             les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour
             réaliser un livre spécimen de polices de texte.</p>
           <div class="trait-rouge pt-2 pb-0"></div>
           <div class="critere ps-1 pt-3">
-                            <span class="sur-place pe-1" style="color:#545454">Sur place :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
+            <span class="sur-place pe-1" style="color:#545454">Sur place :</span>
-                            <span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square" style="color:#4ECB71"></i>
+            <i *ngIf="restaurant.surPlace" class="fas fa-check-square"
+            style="color:#4ECB71"></i>
+            <i *ngIf="restaurant.surPlace === false " class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"></i>
+            <span class="a-emporter ps-3 pe-1" style="color:#545454">A emporter :</span><i class="fas fa-check-square"
+              style="color:#4ECB71"></i>
           </div>
           <div class="trait-rouge pt-3"></div>
           <div class="critere d-flex justify-content-center ps-1 pt-3 pb-3">
-                                <span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"style="color:#ED2F2F"></i>
+            <span class="acces-pmr pe-1" style="color:#545454">Accès PMR :</span><i
+              class="fas fa-times-circle ps-1 pt-1" style="color:#ED2F2F"></i>
           </div>
           <div class="reserver pt-2">
             <button type="button" class="button">Réserver</button>
@@ -54,5 +67,3 @@
 
       <div>
       </div>
-
-

src/app/card-resto/card-resto.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-card-resto',
@@ -7,9 +7,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CardRestoComponent implements OnInit {
 
+  @Input() restaurant : any ; 
+  
   constructor() { }
 
   ngOnInit(): void {
+    console.log(this.restaurant);
+    
   }
 
 }

src/app/pages/resto-page/resto-page.component.html

@@ -2,8 +2,8 @@
     <h2 class="titre ">Résultats :</h2>
         <div class="separation"></div>
         <div class="parent d-flex justify-content-center align-items-center flex-wrap flex-row  ">
-            <div>
+        <div *ngFor="let restaurantData of listRestaurants">
-                <app-card-resto></app-card-resto>
+                <app-card-resto [restaurant]= "restaurantData"></app-card-resto>
             </div>
         </div>
     

src/app/pages/resto-page/resto-page.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { ApiBackService } from 'src/app/services/api-back.service';
 
 @Component({
   selector: 'app-resto-page',
@@ -7,9 +8,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class RestoPageComponent implements OnInit {
 
-  constructor() { }
+  public listRestaurants : any[];
+
+  constructor(private apiBackService : ApiBackService) { 
+    this.listRestaurants = [];
+  }
 
   ngOnInit(): void {
+        
+    this.apiBackService.restoByCat.subscribe((restaurants: any[]) => {
+
+      this.listRestaurants = restaurants;
+      
+
+    });
   }
 
 }

src/app/services/api-back.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Observable, of, Subject } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { environment } from 'src/environments/environment';
 
@@ -8,12 +8,19 @@ import { environment } from 'src/environments/environment';
 })
 export class ApiBackService {
   
-  constructor(private httpClient: HttpClient) { }
+  public restoByCat : Observable<any[]> = of([]);
+
+  constructor(private httpClient: HttpClient) { 
+  }
 
   getRestaurants(): Observable<any[]> {
     return this.httpClient.get<any[]>(`${environment.apiUrl}/restaurants`);
   }
 
+  getRestaurantsByCateg(id : number): void {
+    this.restoByCat = this.httpClient.get<any[]>(`${environment.apiUrl}/restaurantbytype/${id}`);
+  }
+
   getCategories(): Observable<any[]>{
     return this.httpClient.get<any[]>(`${environment.apiUrl}/types`);
   }