step 7 & 8

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

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

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

@@ -6,20 +6,111 @@ import {HousingLocationInfo} from '../housinglocation'; // Importation de l'inte
 @Component({
     selector: 'app-home',
     imports: [HousingLocation],
-    templateUrl: './home.html',
+    templateUrl: 'home.html',
     styleUrls: ['./home.css'],
 })
-
 export class Home {
     readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
-    housingLocation: HousingLocationInfo = {
+    housingLocationList: HousingLocationInfo[] = [
-        id: 9999,
+        {
-        name: 'Test Home',
+            id: 0,
-        city: 'Test city',
+            name: 'Acme Fresh Start Housing',
-        state: 'ST',
+            city: 'Chicago',
-        photo: `${this.baseUrl}/example-house.jpg`,
+            state: 'IL',
-        availableUnits: 99,
+            photo: `${this.baseUrl}/bernard-hermant-CLKGGwIBTaY-unsplash.jpg`,
-        wifi: true,
+            availableUnits: 4,
-        laundry: false,
+            wifi: true,
-    };
+            laundry: true,
-}
+        },
+        {
+            id: 1,
+            name: 'A113 Transitional Housing',
+            city: 'Santa Monica',
+            state: 'CA',
+            photo: `${this.baseUrl}/brandon-griggs-wR11KBaB86U-unsplash.jpg`,
+            availableUnits: 0,
+            wifi: false,
+            laundry: true,
+        },
+        {
+            id: 2,
+            name: 'Warm Beds Housing Support',
+            city: 'Juneau',
+            state: 'AK',
+            photo: `${this.baseUrl}/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg`,
+            availableUnits: 1,
+            wifi: false,
+            laundry: false,
+        },
+        {
+            id: 3,
+            name: 'Homesteady Housing',
+            city: 'Chicago',
+            state: 'IL',
+            photo: `${this.baseUrl}/ian-macdonald-W8z6aiwfi1E-unsplash.jpg`,
+            availableUnits: 1,
+            wifi: true,
+            laundry: false,
+        },
+        {
+            id: 4,
+            name: 'Happy Homes Group',
+            city: 'Gary',
+            state: 'IN',
+            photo: `${this.baseUrl}/krzysztof-hepner-978RAXoXnH4-unsplash.jpg`,
+            availableUnits: 1,
+            wifi: true,
+            laundry: false,
+        },
+        {
+            id: 5,
+            name: 'Hopeful Apartment Group',
+            city: 'Oakland',
+            state: 'CA',
+            photo: `${this.baseUrl}/r-architecture-JvQ0Q5IkeMM-unsplash.jpg`,
+            availableUnits: 2,
+            wifi: true,
+            laundry: true,
+        },
+        {
+            id: 6,
+            name: 'Seriously Safe Towns',
+            city: 'Oakland',
+            state: 'CA',
+            photo: `${this.baseUrl}/phil-hearing-IYfp2Ixe9nM-unsplash.jpg`,
+            availableUnits: 5,
+            wifi: true,
+            laundry: true,
+        },
+        {
+            id: 7,
+            name: 'Hopeful Housing Solutions',
+            city: 'Oakland',
+            state: 'CA',
+            photo: `${this.baseUrl}/r-architecture-GGupkreKwxA-unsplash.jpg`,
+            availableUnits: 2,
+            wifi: true,
+            laundry: true,
+        },
+        {
+            id: 8,
+            name: 'Seriously Safe Towns',
+            city: 'Oakland',
+            state: 'CA',
+            photo: `${this.baseUrl}/saru-robert-9rP3mxf8qWI-unsplash.jpg`,
+            availableUnits: 10,
+            wifi: false,
+            laundry: false,
+        },
+        {
+            id: 9,
+            name: 'Capital Safe Towns',
+            city: 'Portland',
+            state: 'OR',
+            photo: `${this.baseUrl}/webaliser-_TPTXZd9mOo-unsplash.jpg`,
+            availableUnits: 6,
+            wifi: true,
+            laundry: true,
+        },
+    ];
+}

first-app/src/app/housing-location/housing-location.html

@@ -0,0 +1,6 @@
+<section class="listing">
+    <img class="listing-photo" [src]="housingLocation().photo"
+         alt="Exterior photo of {{ housingLocation().name }}" crossorigin/>
+    <h2 class="listing-heading">{{ housingLocation().name }}</h2>
+    <p class="listing-location">{{ housingLocation().city }}, {{ housingLocation().state }}</p>
+</section>

first-app/src/app/housing-location/housing-location.ts

@@ -3,11 +3,7 @@ import {HousingLocationInfo} from '../housinglocation'; // Interface
 @Component({
     selector: 'app-housing-location',
     imports: [],
-    template: `
+    templateUrl: './housing-location.html',
-        <p>
-            housing-location works!
-        </p>
-    `,
     styleUrls: ['./housing-location.css'],
 })
 export class HousingLocation {