step 11

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

@@ -1,15 +1,39 @@
-import { Component } from '@angular/core';
-
+import {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {HousingService} from '../housing';
+import {HousingLocationInfo} from '../housinglocation';
 @Component({
-  selector: 'app-details',
-  imports: [],
-  template: `
-    <p>
-      details works!
-    </p>
+    selector: 'app-details',
+    template: `
+    <article>
+      <img
+        class="listing-photo"
+        [src]="housingLocation?.photo"
+        alt="Exterior photo of {{ housingLocation?.name }}"
+        crossorigin
+      />
+      <section class="listing-description">
+        <h2 class="listing-heading">{{ housingLocation?.name }}</h2>
+        <p class="listing-location">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
+      </section>
+      <section class="listing-features">
+        <h2 class="section-heading">About this housing location</h2>
+        <ul>
+          <li>Units available: {{ housingLocation?.availableUnits }}</li>
+          <li>Does this location have wifi: {{ housingLocation?.wifi }}</li>
+          <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
+        </ul>
+      </section>
+    </article>
   `,
-  styles: ``
+    styleUrls: ['./details.css'],
 })
 export class Details {
-
-}
+    route: ActivatedRoute = inject(ActivatedRoute);
+    housingService = inject(HousingService);
+    housingLocation: HousingLocationInfo | undefined;
+    constructor() {
+        const housingLocationId = Number(this.route.snapshot.params['id']);
+        this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
+    }
+}