step 13

first-app/src/app/details/details.ts

@@ -9,10 +9,10 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
     template: `
         <article>
             <img
-                    class="listing-photo"
-                    [src]="housingLocation?.photo"
-                    alt="Exterior photo of {{ housingLocation?.name }}"
-                    crossorigin
+                class="listing-photo"
+                [src]="housingLocation?.photo"
+                alt="Exterior photo of {{ housingLocation?.name }}"
+                crossorigin
             />
             <section class="listing-description">
                 <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
@@ -30,11 +30,11 @@ import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
                 <h2 class="section-heading">Apply now to live here</h2>
                 <form [formGroup]="applyForm" (submit)="submitApplication()">
                     <label for="first-name">First Name</label>
-                    <input id="first-name" type="text" formControlName="firstName" />
+                    <input id="first-name" type="text" formControlName="firstName"/>
                     <label for="last-name">Last Name</label>
-                    <input id="last-name" type="text" formControlName="lastName" />
+                    <input id="last-name" type="text" formControlName="lastName"/>
                     <label for="email">Email</label>
-                    <input id="email" type="email" formControlName="email" />
+                    <input id="email" type="email" formControlName="email"/>
                     <button type="submit" class="primary">Apply now</button>
                 </form>
             </section>

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

@@ -1,12 +1,10 @@
 <section>
-    <form>
-        <input type="text" placeholder="Filter by city" />
-        <button class="primary" type="button">Search</button>
+    <form><input type="text" placeholder="Filter by city" #filter/>
+        <button class="primary" type="button" (click)="filterResults(filter.value)">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()),);
     }
 }