ajout button Recherche (non fonctionnel)

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-search-bar *ngIf="dontShow"></app-search-bar>
+<app-search-bar *ngIf="dontShow" ></app-search-bar>
 <app-nav-bar *ngIf="dontShow"></app-nav-bar>
 <router-outlet></router-outlet>
 <app-footer *ngIf="dontShow"></app-footer>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
+import { ApiBackService } from './services/api-back.service';
 
 @Component({
   selector: 'app-root',
@@ -9,8 +10,11 @@ import { NavigationEnd, Router } from '@angular/router';
 export class AppComponent {
   title = 'simpleat';
   dontShow: boolean = false;
+  searchParam: any;
+  listResto: any;
 
-  constructor(private router:Router){
+
+  constructor(private router:Router, private apiBackService : ApiBackService){
     this.router.events.subscribe(e=>{
       //console.log(e);
       if(e instanceof NavigationEnd){
@@ -22,5 +26,30 @@ export class AppComponent {
         }
       }
     })
+  
+
+
+  this.searchParam = {
+    searchText : "",
+    filterText : "first"
   }
+
+}
+
+  ngOnInit(): void {
+
+    this.listResto = this.apiBackService.getRestaurants();
+
+    console.log(this.listResto)
+  }
+
+  // onSearchResto(searchText: string,) {
+  //   this.searchParam.searchText = searchText;
+  //   const rawData = this.apiBackService.getRestaurants();
+    
+  //   this.listResto = rawData.filter(resto =>
+  //      resto.name.toLowerCase().includes(searchText.toLowerCase()))
+  // }
+
+
 }

src/app/header/components/search-bar/search-bar.component.html

@@ -4,7 +4,8 @@
       <img src="assets/images-header/LOGO2.png" alt="logo">
     </div>
       <form style="width: 30%;" class="d-flex align-items-center pe-2 pt-2">
-        <input class="form-control me-5 position-relative" type="search" placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
+        <input class="form-control me-5 position-relative" type="search" #newItem placeholder="Trouver votre SIMPL'EAT..." aria-label="Search">
+        <button (click) = "onChangeInput(newItem.value)">Recherche</button>
       </form>
         <div class="trait">
           <p>LE BON PLAN POUR MANGER</p>

src/app/header/components/search-bar/search-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 
 @Component({
   selector: 'app-search-bar',
@@ -7,9 +7,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SearchBarComponent implements OnInit {
 
-  constructor() { }
+@Output() searchText = new EventEmitter();
 
-  ngOnInit(): void {
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  onChangeInput(search :string) {
+    this.searchText.emit(search);
+    console.log(search);
   }
-
 }