step 5

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

@@ -1,6 +1,9 @@
 <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"/>
 </section>

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

@@ -1,9 +1,25 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {HousingLocation} from '../housing-location/housing-location';  //Importation du component ici pour l'intégrer à la page
+
+import {HousingLocationInfo} from '../housinglocation'; // Importation de l'interface
 
 @Component({
-  selector: 'app-home',
-  templateUrl: './home.html',
-  styleUrls: ['./home.css'],
+    selector: 'app-home',
+    imports: [HousingLocation],
+    templateUrl: './home.html',
+    styleUrls: ['./home.css'],
 })
 
-export class Home {}
+export class Home {
+    readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
+    housingLocation: HousingLocationInfo = {
+        id: 9999,
+        name: 'Test Home',
+        city: 'Test city',
+        state: 'ST',
+        photo: `${this.baseUrl}/example-house.jpg`,
+        availableUnits: 99,
+        wifi: true,
+        laundry: false,
+    };
+}

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

@@ -0,0 +1,30 @@
+.listing {
+    background: var(--accent-color);
+    border-radius: 30px;
+    padding-bottom: 30px;
+}
+.listing-heading {
+    color: var(--primary-color);
+    padding: 10px 20px 0 20px;
+}
+.listing-photo {
+    height: 250px;
+    width: 100%;
+    object-fit: cover;
+    border-radius: 30px 30px 0 0;
+}
+.listing-location {
+    padding: 10px 20px 20px 20px;
+}
+.listing-location::before {
+    content: url("/assets/location-pin.svg") / "";
+}
+section.listing a {
+    padding-left: 20px;
+    text-decoration: none;
+    color: var(--primary-color);
+}
+section.listing a::after {
+    content: "\203A";
+    margin-left: 5px;
+}

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

@@ -0,0 +1,15 @@
+import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
+import {HousingLocationInfo} from '../housinglocation'; // Interface
+@Component({
+    selector: 'app-housing-location',
+    imports: [],
+    template: `
+        <p>
+            housing-location works!
+        </p>
+    `,
+    styleUrls: ['./housing-location.css'],
+})
+export class HousingLocation {
+    housingLocation = input.required<HousingLocationInfo>();
+}

first-app/src/app/housinglocation.ts

@@ -0,0 +1,10 @@
+export interface HousingLocationInfo {
+    id: number;
+    name: string;
+    city: string;
+    state: string;
+    photo: string;
+    availableUnits: number;
+    wifi: boolean;
+    laundry: boolean;
+}