step 12

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

@@ -2,8 +2,10 @@ import {Component, inject} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {HousingService} from '../housing';
 import {HousingLocationInfo} from '../housinglocation';
+import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 @Component({
     selector: 'app-details',
+    imports: [ReactiveFormsModule],
     template: `
         <article>
             <img
@@ -24,6 +26,18 @@ import {HousingLocationInfo} from '../housinglocation';
                     <li>Does this location have laundry: {{ housingLocation?.laundry }}</li>
                 </ul>
             </section>
+            <section class="listing-apply">
+                <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" />
+                    <label for="last-name">Last Name</label>
+                    <input id="last-name" type="text" formControlName="lastName" />
+                    <label for="email">Email</label>
+                    <input id="email" type="email" formControlName="email" />
+                    <button type="submit" class="primary">Apply now</button>
+                </form>
+            </section>
         </article>
     `,
     styleUrls: ['./details.css'],
@@ -32,8 +46,20 @@ export class Details {
     route: ActivatedRoute = inject(ActivatedRoute);
     housingService = inject(HousingService);
     housingLocation: HousingLocationInfo | undefined;
+    applyForm = new FormGroup({
+        firstName: new FormControl(''),
+        lastName: new FormControl(''),
+        email: new FormControl(''),
+    });
     constructor() {
-        const housingLocationId = Number(this.route.snapshot.params['id']);
+        const housingLocationId = parseInt(this.route.snapshot.params['id'], 10);
         this.housingLocation = this.housingService.getHousingLocationById(housingLocationId);
     }
+    submitApplication() {
+        this.housingService.submitApplication(
+            this.applyForm.value.firstName ?? '',
+            this.applyForm.value.lastName ?? '',
+            this.applyForm.value.email ?? '',
+        );
+    }
 }

first-app/src/app/housing.ts

@@ -113,4 +113,9 @@ export class HousingService {
     getHousingLocationById(id: number): HousingLocationInfo | undefined {
         return this.housingLocationList.find((housingLocation) => housingLocation.id === id);
     }
+    submitApplication(firstName: string, lastName: string, email: string) {
+        console.log(
+            `Homes application received: firstName: ${firstName}, lastName: ${lastName}, email: ${email}.`,
+        );
+    }
 }