step 13

first-app/src/app/home/home.html

@@ -1,12 +1,10 @@
 <section>
-    <form>
+    <form><input type="text" placeholder="Filter by city" #filter/>
-        <input type="text" placeholder="Filter by city" />
+        <button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
-        <button class="primary" type="button">Search</button>
     </form>
 </section>
-
 <section class="results">
-    @for(housingLocation of housingLocationList; track $index) {
+    @for (housingLocation of filteredLocationList; track $index) {
         <app-housing-location [housingLocation]="housingLocation"></app-housing-location>
     }
 </section>

first-app/src/app/home/home.ts

@@ -15,7 +15,18 @@ import {HousingService} from '../housing'; // Importation d'un service
 export class Home {
     housingLocationList: HousingLocationInfo[] = [];
     housingService: HousingService = inject(HousingService);
+    filteredLocationList: HousingLocationInfo[] = [];
+
     constructor() {
         this.housingLocationList = this.housingService.getAllHousingLocations();
+        this.filteredLocationList = this.housingLocationList;
+    }
+
+    filterResults(text: string) {
+        if (!text) {
+            this.filteredLocationList = this.housingLocationList;
+            return;
+        }
+        this.filteredLocationList = this.housingLocationList.filter((housingLocation) => housingLocation?.city.toLowerCase().includes(text.toLowerCase()),);
     }
 }