Details

src/app/app.component.html

@@ -1,5 +1,9 @@
 <div class="container">
-  <h1 class="text-center my-5 fw-bold">Homes</h1>
+  <div class="text-center my-4">
+    <a [routerLink]="['/']" class="display-4 text-decoration-none fw-bold text-primary hover:text-decoration-underline">
+      Homes
+    </a>
+  </div>
 
-  <app-home></app-home>
+  <router-outlet></router-outlet>
 </div>

src/app/app.component.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {RouterLink, RouterOutlet} from '@angular/router';
 import {HomeComponent} from './home/home.component';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HomeComponent],
+  imports: [RouterOutlet, HomeComponent, RouterLink],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })

src/app/app.routes.ts

@@ -1,3 +1,17 @@
 import { Routes } from '@angular/router';
+import {HomeComponent} from './home/home.component';
+import {DetailsComponent} from './details/details.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    title: 'Home page',
+  },
+
+  {
+    path: 'details/:id',
+    component: DetailsComponent,
+    title: 'Home Details',
+  },
+];

src/app/details/details.component.html

@@ -1 +1,41 @@
-<p>details works!</p>
+<article class="container my-5">
+  <div class="row">
+    <div class="col-md-6">
+      <img
+        class="img-fluid rounded shadow mb-4"
+        style="width: 100%; height: 385px; object-fit: cover;"
+        [src]="housingLocation?.photo"
+        alt="Exterior photo of {{ housingLocation?.name }}"
+        crossorigin
+      />
+    </div>
+    <div class="col-md-6">
+      <section class="mb-4">
+        <h2 class="display-5 fw-bold text-primary mb-3">{{ housingLocation?.name }}</h2>
+        <p class="fs-4 text-secondary">{{ housingLocation?.city }}, {{ housingLocation?.state }}</p>
+      </section>
+
+      <section class="bg-light p-4 rounded shadow-sm">
+        <h2 class="h4 mb-4 border-bottom pb-2">About this housing location</h2>
+        <ul class="list-unstyled">
+          <li class="mb-3 d-flex align-items-center">
+            <i class="bi bi-building me-2"></i>
+            <span class="fs-5">Units available: <strong>{{ housingLocation?.availableUnits }}</strong></span>
+          </li>
+          <li class="mb-3 d-flex align-items-center">
+            <i class="bi bi-wifi me-2"></i>
+            <span class="fs-5">WiFi:
+              <strong>{{ housingLocation?.wifi ? 'Yes' : 'No' }}</strong>
+            </span>
+          </li>
+          <li class="mb-3 d-flex align-items-center">
+            <i class="bi bi-water me-2"></i>
+            <span class="fs-5">Laundry:
+              <strong>{{ housingLocation?.laundry ? 'Yes' : 'No' }}</strong>
+            </span>
+          </li>
+        </ul>
+      </section>
+    </div>
+  </div>
+</article>

src/app/details/details.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {Component, inject} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {HousingService} from '../housing.service';
+import {HousingLocation} from '../housing-location';
 
 @Component({
   selector: 'app-details',
@@ -8,5 +11,12 @@ import { Component } from '@angular/core';
   styleUrl: './details.component.css'
 })
 export class DetailsComponent {
+  route: ActivatedRoute = inject(ActivatedRoute);
+  housingService = inject(HousingService);
+  housingLocation: HousingLocation | undefined;
 
+  constructor() {
+    const housingLocationId = Number(this.route.snapshot.params['id']);
+    this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
+  }
 }

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

@@ -11,5 +11,6 @@
   <div class="card-body">
     <h2 class="card-title">{{ housingLocation.name }}</h2>
     <p class="card-text">{{ housingLocation.city }}, {{ housingLocation.state }}</p>
+    <a [routerLink]="['/details', housingLocation.id]">Learn More</a>
   </div>
 </section>

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

@@ -1,10 +1,13 @@
 import {Component, Input} from '@angular/core';
 import {HousingLocation} from '../housing-location';
+import {RouterLink} from '@angular/router';
 
 @Component({
   selector: 'app-housing-location',
   standalone: true,
-  imports: [],
+  imports: [
+    RouterLink
+  ],
   templateUrl: './housing-location.component.html',
   styleUrl: './housing-location.component.css'
 })